Add and delete multiple rows from a table

Question

I have a dynamic table in my vue app that adds or deletes rows when buttons are clicked. The table looks like this.

<table class="stripped centered">
        <thead>
          <tr>
            <th></th>
            <th>No.</th>
            <th>Part No.</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>unit market price</th>
            <th>Markup percentage</th>
            <th><a @click="addRow " class="waves-effect waves-light btn blue darken-3 white-text">Add row</a></th>
          </tr>
        </thead>
        <tbody class="body-rows" v-for="(row, index) in tableRows" :key="index">
          <tr>
            <td><a @click.prevent="deleteRow(index)" class="waves-effect waves-light btn red darken-3 white-text"><i class="material-icons left">delete</i></a></td>
            <td><input class="item-no" type="number" step="0.001" placeholder="Item no"></td>
            <td><input class="part-no" type="text" placeholder="part no"></td>
            <td><input type="text" placeholder="description"></td>
            <td><input class="quantity" type="number" step="0.01" placeholder="quantity"></td>
            <td><input class="ump" type="number" step="0.01" placeholder="UMP"></td>
            <td><input class="markup" type="number" step="0.01" placeholder="markup %"></td>
            <td><a class="add-sub waves-effect waves-light btn teal darken-3 white-text"><i class="material-icons left">add</i>sub</a></td>
          </tr>
          <tr>
            <td><div class="chip">Freight and Insurance</div></td>
            <td><div class="chip">Other costs</div></td>
            <td><div class="chip">Custom Rates</div></td>
            <td><div class="chip">Excise Tax</div></td>
            <td><div class="chip">VAT</div></td>
            <td><div class="chip">Surtax</div></td>
            <td><div class="chip">Withholding Tax</div></td>
          </tr>
          <tr>
            <td><input type="number" placeholder="freight & insurance"></td>
            <td><input type="number" placeholder="other costs"></td>
            <td><input type="number" placeholder="custom rates"></td>
            <td><input type="number" placeholder="excise tax"></td>
            <td><input type="number" placeholder="vat"></td>
            <td><input type="number" placeholder="surtax"></td>
            <td><input type="number" placeholder="withholding"></td>
          </tr>
        </tbody>
      </table>

As you see I am trying to add three rows in one iteration of the v-for loop. And in my script I have:

data(){
    return{
          currentRows: 0,
          tableRows: [],
    }
}
methods:{
    addRow(){
      this.currentRows++
      this.tableRows.push(this.currentRows)
    },
    deleteRow(index){
      this.tableRows.splice(index, 1)
},

The add button works and adds the three rows. But when I click the delete button on the row it deletes the last row instead of deleting it self. Any help would be appreciated. Thanks

why not directly use the index like deleteRow(index) and inside deleteRow do this.tableRows.splice(index, 1)? — Minato
– Minato, Commented Apr 23, 2020 at 12:13
@Minato ow this is something I tried when directly using index didn't work. They have the same results tho. — Abdulaziz Yesuf
– Abdulaziz Yesuf, Commented Apr 23, 2020 at 12:16
It could be that the comparator in indexOf return -1 and the splice always removes a row from the end — Minato
– Minato, Commented Apr 23, 2020 at 12:17
@Minato I changed it back to using index directly and It still removes from the end — Abdulaziz Yesuf
– Abdulaziz Yesuf, Commented Apr 23, 2020 at 12:18

Edwin T. · Accepted Answer · 2020-04-23 13:11:23Z

2

Your implementation would look like this

<table class="stripped centered">
    <thead>
      <tr>
        <th></th>
        <th>No.</th>
        <th>Part No.</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>unit market price</th>
        <th>Markup percentage</th>
        <th><a @click="addRow " class="waves-effect waves-light btn blue darken-3 white-text">Add row</a></th>
      </tr>
    </thead>
    <tbody class="body-rows">
      <tr v-for="(row, index) in tableRows" :key=":key="JSON.stringify(row)"">
          <td>
            <table>
               <tr>
        <td><a @click.prevent="deleteRow(index)" class="waves-effect waves-light btn red darken-3 white-text"><i class="material-icons left">delete</i></a></td>
        <td><input class="item-no" type="number" step="0.001" placeholder="Item no"></td>
        <td><input class="part-no" type="text" placeholder="part no"></td>
        <td><input type="text" placeholder="description"></td>
        <td><input class="quantity" type="number" step="0.01" placeholder="quantity"></td>
        <td><input class="ump" type="number" step="0.01" placeholder="UMP"></td>
        <td><input class="markup" type="number" step="0.01" placeholder="markup %"></td>
        <td><a class="add-sub waves-effect waves-light btn teal darken-3 white-text"><i class="material-icons left">add</i>sub</a></td>
      </tr>
      <tr>
        <td><div class="chip">Freight and Insurance</div></td>
        <td><div class="chip">Other costs</div></td>
        <td><div class="chip">Custom Rates</div></td>
        <td><div class="chip">Excise Tax</div></td>
        <td><div class="chip">VAT</div></td>
        <td><div class="chip">Surtax</div></td>
        <td><div class="chip">Withholding Tax</div></td>
      </tr>
      <tr>
        <td><input type="number" placeholder="freight & insurance"></td>
        <td><input type="number" placeholder="other costs"></td>
        <td><input type="number" placeholder="custom rates"></td>
        <td><input type="number" placeholder="excise tax"></td>
        <td><input type="number" placeholder="vat"></td>
        <td><input type="number" placeholder="surtax"></td>
        <td><input type="number" placeholder="withholding"></td>
      </tr>
            </table>
          </td>          
      </tr>
    </tbody>
    </table>

edited Apr 23, 2020 at 13:11

answered Apr 23, 2020 at 12:30

Edwin T.

1107 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abdulaziz Yesuf Over a year ago

Well that only iterates over one row only I want to add three rows on one iteration.

Edwin T. Over a year ago

The table should have a single <tbody> so the parts you want to manipulate wrapped in the <tr> with the iteration so that serves as the focal for the splice when removing from the DOM

Abdulaziz Yesuf Over a year ago

I thought that was what I was doing. wrapping all three <tr>s with <tbody> and iterating over them. Could you show me what you mean in the answer?

Abdulaziz Yesuf Over a year ago

This should work but it is still deleting the last row. I don't understand what is wrong with it

Edwin T. Over a year ago

change :key="index" to :key="JSON.stringify(row)" that should fix it. You can have a utility method to handle for cleaner experience. jsfiddle.net/4bpc0m2f/1

Muhammad Bilal · Accepted Answer · 2020-04-23 12:52:45Z

0

You should modify your code as follows

in deleteRow function call pass row id as well

   <td><a @click.prevent="deleteRow(row.id,index)" class="waves-effect waves-light btn red 
   darken-3 white-text"><i class="material-icons left">delete</i></a></td>

and delete method as follows

   deleteRow(id,index){
      this.tableRows.splice(id, 1);
      this.tableRows.splice(index, 1)
   }

answered Apr 23, 2020 at 12:52

Muhammad Bilal

3441 gold badge2 silver badges13 bronze badges

1 Comment

Abdulaziz Yesuf Over a year ago

This just deletes two rows from the end

Collectives™ on Stack Overflow

Add and delete multiple rows from a table

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related