Question

我已经针对上述问题通过了很多解决方案，但是由于我的细胞离开了，它们很混乱。 “小区权利”似乎并不适用于我的情况。

使用jQuery的clone方法非常简单，但也存在一个问题。问题是，当我克隆最后一行时，它将复制上一行的所有数据。附加的另一个问题是：ID。克隆完成后，同样的'名称'和复制'ID'会在发布数据时产生问题，所以我也需要动态。所以我没有得到我们如何将数据传递给克隆函数，这将解决动态“属性”问题。

CODE：

<table id="advertisement_main_table" class="table" cellpadding="4" cellspacing="1" width="100%;">  
<tr class="odd align_center">
                    <td>1.</td>
                    <td><input type="text" id="ad_elements" class="textbox_150_with_border"></td>
                    <td><textarea id="ad_description" rows="01" cols="50" class="advertisement_textarea" ></textarea></td>
                    <td><input type="text" id="ad_duration" class="textbox_60_with_border"></td>
                    <td><input type="text" id="ad_loop_day" class="textbox_60_with_border"></td>
                    <td><input type="text" id="ad_seconds_played" class="textbox_100_with_border"></td>
                </tr></table>

现在上面的代码<td>1.</td>是硬编码的，但如何在下一个<tr>中的每个ID中添加“后缀”，例如“ad_element_1”，“ad_duration_1”，“ad_element_2”，“ad_duration_2”以及等...... ..

我希望你明白我想说的话

Answer 1

您可以使用jquery模板插件来实现此目的。创建标记以添加表的行并在模板中迭代它。然后在页面加载或OnClick任何按钮或任何需要的地方调用该函数。如果您需要任何服务器端数据，也可以通过创建Web方法并返回jason对象来完成。您可以在以下网址找到更多信息：http://api.jquery.com/jQuery.template/

Answer 2

部分解决方案是使用<input type="text" name="ad_elements[]" class="textbox_150_with_border" />而不是id。这样克隆时名称仍然有效，并且只有在发布时才会收到一系列ad_elements条目。

其余的，就像转动“1”一样。进入“2.”，我担心没有灵丹妙药，你必须在克隆后自己做，但在这种特殊情况下这很容易：

$（new_tr）.find（'td：first-child'）。text（function（text）{ return（parseInt（text）+1）+“。”; }）;

只需用包含克隆TR的任何变量替换new_tr。

Answer 3

如果你添加动态元素，那么无论如何都不需要ids;可能没有任何CSS或jQuery选择器明确地与新的ID相关联，毕竟它们不存在直到它们被创建，如果有的话，所以你可以简单地删除它们：

$(clonedRow).find('*').removeAttr('id');

否则，如果你真的想要新的id，你可以保留一个全局计数器newId并为每个元素关联新的id：

newId++;
$(clonedRow).find('*').attr('id', function() {
  if (this.id.length) return this.id + '_' + newId;
});

See here as fiddle demonstration 将鼠标悬停在输入元素上以查看新ID

Answer 4

以下是我解决这个问题的方法。

var $newRow = $("#tableName tbody>tr:last").clone();
$newRow.find('input').attr('someAttribute','0');
$newRow.find('input').attr('anotherAttribute','1');
$('#tableName>tbody').append($newRow);

只需将'input'替换为表格中的控件类型即可。并且'someAttribute'具有实际属性名称，第二个参数当然是您对该属性的值。

使用jQuery / Javascript动态添加/删除表中的行

4 个答案: