0

我有一个带有添加/删除按钮的表格，这些按钮在表格中添加和删除行，每个新行也添加了按钮

这里有我的 html

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<- target row ->
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</- target row ->
</table>

JavaScript：

$("#Add").click(function() {
         $('#cat_row').after('<- target row with ->'); // this is only a notation to prevent repeatation
         id++;
});

$("#Remove").click(function() {
         $('#cat_'+id+'_row').remove();
         id--;
});

请注意，每次添加新行id后，例如在单击“添加”按钮1 次后，此处也会发生更改

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
<tr id="cat_1_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</table>

现在新添加的按钮没有动作我必须总是点击原始按钮- 添加/删除

在此之后，我想让删除按钮仅删除单击它的行，例如，如果我单击第 2 行中的按钮，第 2 行将被删除

信息：我使用 web2py 2.2.1 和 python 2.7 以及最新版本的 jQuery

4

2 回答 2

3

我认为这会更好，而不是：

$('#cat_'+id+_row').remove();

在您的 onclick 事件中执行此操作：

$(this).parent().parent().remove();
于 2012-11-19T11:25:58.250 回答
3

您不能有两个相同的按钮id（“添加”和“删除”都使用重复项）。id值在页面上必须是唯一的。

您可能会考虑使用一个类，也可以看看事件委托。例如，假设这是您页面上唯一的表格（如果不是，只需使选择器更具体），如果您将按钮更改为具有“add-btn”和“remove-btn”类而不是id值，那么您可以使用delegate：

$("table").delegate(".add-btn", "click", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

...对于.remove-btn按钮也是如此。

或者，有些人更喜欢使用on（注意参数的顺序略有不同）：

$("table").on("click", ".add-btn", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

您目前使用哪种风格是一种风格问题。我更喜欢delegate清晰，但 jQuery 团队喜欢超重载他们的函数。到目前为止，他们还没有弃用delegate，尽管他们确实称其为“已取代”。

于 2012-11-19T11:24:15.860 回答