1

我正在编写一些 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 的 Adblock Plus 插件阻止了“addRow”类可见（它display:none用于一堆与广告相关的类）。我已经编辑了问题和答案以将类更改为“appendRow”，这样任何复制此代码的人都不会遇到我刚刚遇到的问题。

4

1 回答 1

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);
    });
});​

小提琴

于 2012-08-19T18:24:45.417 回答