Question

我正在编写一些jquery来创建动态表单表。

它需要做的只是克隆一行，然后更改该行的一些属性以使其唯一。

所以，我的策略是首先克隆它，将它附加到表中，然后获取它的一个子元素并修改它。一切正常，但最后一部分。

$(function () {
$(".appendRow").click(function() {
    var body = $(this).closest("tbody");
    var row = $(this).closest("tr");
    var newNum = $(".operation").size();
    $("#test").append("<p>newNum: " + newNum + "</p>");
    var clone = row.clone();    
    body.append(clone);
    var newRow = $(".RowNumber").get(newNum);
    var newRowNum = newNum + 1;
    $("#test").append("<p>newRowNum: " + newRowNum + "</p>");
    // $("#test").append("<p>type: " + newRow.type() + "</p>"); // tried to check type with this, error
    //newRow.html(newRowNum); // trying to change html of span element, fails with error
}); 

});

第一条注释行旨在帮助我调试。它和其他其他注释行导致Google Chrome出错：

本地异常，类型错误，newRow未定义。

下面是html：

<form id="processname" name="processname" method="post" action="" >
<table border="1" width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="right" valign="middle">Order</td>
<td align="left" valign="middle">Process</td>
<td>Operation</td>
<td>Value</td>
<td>+</td>
<td>&ndash;</td>
</tr>

<tr>
<td><span class="rowNumber">1</span></td>
<!--<td><span class="rowNumber">1</span></td>-->
<td>
<select class="process" name="category_1" id="category_1" onChange="javascript: dropdownlist(this); elementPos(this)">
<option value="">Select Category</option>

<option value="3" selected="selected">translate</option>
<option value="4">math</option>
<option value="5">format</option>
<option value="6">write</option></select></td>
<td align="left" valign="middle">
<select class="operation" name="operation_1" id="operation_1">
<option value="">Select Sub-Category</option>
<option value="s->c" selected="selected">Use source as core by default</option><option value="s->t->c">Only process translated values</option></select>
</td>
<td>
<input type="text" name="value_1" id="value_1" value="" />
</td>
    <td><input type="button" style="max-width:5em" class="appendRow" value="+" /></td>
    <td><input type="button" class="delRow" value="-" /></td>
</tr>
.
.
.

</table>
</form>

2013年5月29日的注意事项：我最近发现我的Google Chrome广告版附加功能阻止了“addRow”类的显示（它将display:none用于与广告相关的一大类）。我编辑了问题和答案，将类更改为“appendRow”，以便复制此代码的任何人都不会遇到我刚才遇到的同样问题。

Answer 1

为什么要追加一个元素，然后在你追加它之前修改它时从DOM中获取该元素进行修改？

我不知道你要做什么，但也许是这样的：

$(function() {
    $('#processname').on('click', '.addRow', function() {
        var body = $(this).closest("tbody");
        var row = $(this).closest("tr");
        var newNum = $(".operation").length + 1;
        var clone = row.clone();
        clone.find('.rowNumber').html(newNum);
        body.append(clone);
    });
});

FIDDLE

jQuery克隆的表行不能从DOM中检索？

1 个答案: