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

时间:2012-08-19 18:02:28

标签: jquery

我正在编写一些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”,以便复制此代码的任何人都不会遇到我刚才遇到的同样问题。

1 个答案:

答案 0 :(得分:2)

为什么要追加一个元素,然后在你追加它之前修改它时从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