0

我有以下 jquery 代码来添加和删除表中的一行。我在一页上有多个表格。每个表中的每一行都有这两个类：.row-add 和 .row-delete

现在，当我单击“.row-add”添加新行时，所有表都会受到影响，这意味着该行将添加到同一页面上的所有表中。我应该怎么做才能使它在单击时仅适用于自己的表？

查询：

$(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>
4

2 回答 2

0

尝试具体...最接近（“tr”）您正在选择所有trs。

尝试提供一个 ID 或类并使用 jquery 选择该 ID。

于 2012-09-07T14:37:14.810 回答
0

问题是你的 jQuery 选择器在类属性上，如果你想引用单个表，你必须通过 id 去。

在这种情况下，我认为最好的方法是，如果您以编程方式生成 html 代码，则将自动生成的 id 添加到每个表中，并将以下代码添加到每个可点击的行中：

onclick="addrow(table_id)"

其中 table_id 是表的自动生成的 id。然后：

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

请注意，也应避免 .table-comparison 切换到 id，但我不知道您的代码的详细信息！

希望这可以帮助！

编辑：更好的是，如果你不生成代码，是绑定函数，比如

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

通过这种方式，您可以事后访问发送事件的人。在你的情况下，你我认为你可以写：

$(".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");
    });

来源：jQuery 文档

于 2012-09-07T14:39:16.030 回答