Add/remove row in a table

Question

I have the following jquery code to add and remove a row in a table. I have multiple tables on one page. Each row in each table has these two classes: .row-add and .row-delete

Now when I click on '.row-add'to add a new row, all the tables are affected, meaning that row is added to all of the tables on the same page. What should I do to make it only apply to its own table when clicked?

Jquery:

$(document).ready(function () {
    $('.row-delete').click(function () {
      $(this).closest("tr").remove();
    });

    $('.row-add').click(function () {
      $(this).closest("tr").clone(true).appendTo(".table-comparison");
    });

  });

Html:

<div id="tab-1" class="tab-section">
                            <div class="container flat rounded-sm bspace">
                          <table cellspacing="0" class="display table-comparison">
                        <thead>
                            <tr>
                              <th><span>Effective Date</span></th>
                              <th><span>Price</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input class="effective-date" type="text" value="01/01/2013"> - <input class="effective-date" type="text" value="06/05/2015">
                <span class="row-add"></span>
                <span class="row-delete"></span>
                  </td>
                <td>
                $<input class="price" value="50">
                /
                <select>
                  <option>Second</option>
                  <option>Minute</option>
                  <option>Hour</option>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                </select>
                /
                 <select>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                  <option>Month</option>
                  <option>Quarter</option>
                  <option>Year</option>
                </select>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                </td>                           
                </tr>


              <tr class="price-present">
                                <td><input class="effective-date" type="text" value="07/01/2013"> - <span class="effective-date">Present</span>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                  </td>
                <td>
                $<input class="price" value="40">
                /
                <select>
                  <option>Second</option>
                  <option>Minute</option>
                  <option>Hour</option>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                </select>
                /
                 <select>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                  <option>Month</option>
                  <option>Quarter</option>
                  <option>Year</option>
                </select>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                </td>                           
                </tr>

                <tr>
                                <td><input class="effective-date" type="text" value="01/01/2011"> - <input class="effective-date" type="text" value="06/30/2012">
                <span class="row-add"></span>
                <span class="row-delete"></span>
                  </td>
                <td>
                $<input class="price" value="30">
                /
                <select>
                  <option>Second</option>
                  <option>Minute</option>
                  <option>Hour</option>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                </select>
                /
                 <select>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                  <option>Month</option>
                  <option>Quarter</option>
                  <option>Year</option>
                </select>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                </td>                           
                </tr>




                        </tbody>
                    </table>
                      </div>
                        </div>

score 0 · Answer 1 · answered Sep 07 '12 at 14:37

0

try to be specific ... closest("tr") you are selecting all trs.

try giving an ID, or class and select that id using jquery.

answered Sep 07 '12 at 14:37

pl4g4

101
4

Vincenzo Maggio · Answer 2 · 2012-09-07T14:59:30.490

The problem is that your jQuery selector is on class attribute, if you want to refer to a single table, you have to go by id.

In this case I think the best approach is, if you generate programmatically the html code, to add to every table an auto generated id and to add to every clickable row the following code:

onclick="addrow(table_id)"

where table_id is the autogenerated id of the table. Then:

function addrow(table) {$(table).closest("tr").clone(true).appendTo(".table-comparison");}

Just be warned that also .table-comparison should be avoided switching to id, but I don't know the details of your code!

Hope this helps!

EDIT: still better, if you don't generate code, is the bind function, like

$("p").bind("click", function(event){

This way you can access ex-post who has sent the event. In your case you I think you could write:

$(".row-delete").bind("click", function (event) {
    event.target.closest("tr").remove();
    });

$(".row-add").bind("click", function (event) {
    event.target.closest("tr").clone(true).appendTo(".table-comparison");
    });

Source: JQuery Doc

I copied the html here as well. Can you re-write the jquery part? — wcdomy, Sep 07 '12 at 14:51
If you use the bind function it's not necessary: the parameter to the anonymous function passed to bind is the launching event, so you can access it with e.target. What you obtain is THE row that launched the event. From there you can take the table and so on. Added code but I still have to resolve the table-comparison part. — Vincenzo Maggio, Sep 07 '12 at 14:55

Add/remove row in a table

2 Answers2