无法从DOM检索jQuery克隆的表行吗? [英] jQuery cloned table row not retrievable from DOM?
问题描述
我正在写一些jquery来创建动态表单表.
I'm writing some jquery to create a dynamic form table.
要做的就是克隆一行，然后更改该行的一些属性以使其唯一.
All it needs to do is clone a row, and then change a few properties of that row in order to make it unique.
因此，我的策略是首先克隆它，将其附加到表中，然后获取其子元素之一并对其进行修改.除了最后一部分，一切都正常.
So, my strategy is to first clone it, append it to the table, then get one of its child elements and modify it. Everything is working but the last part.
$(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浏览器出现错误:
The first commented line was meant to help me debug. It, and other other commented line, resulted in an error in Google Chrome:
本地异常，类型错误，newRow未定义.
Local exception, type error, newRow is undefined.
下面是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>–</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"，这样，任何复制此代码的人都不会遇到与我刚遇到的相同的问题.
NOTE on May 29, 2013: I discovered recently that my Adblock Plus add on for Google Chrome was preventing class "addRow" from being visible (it uses display:none for a bunch of classes associated with ads). I've edited the question and answer to change the class to "appendRow" so that anyone copying this code won't have the same problem I just had.
推荐答案
为什么要附加一个元素，然后从DOM中获取该元素以在可以对其进行附加修改之前对其进行修改?
Why would you append an element, then get that element from the DOM to modify it when you can modify it before you append it ?
我不知道您要做什么，但是也许是这样的:
I have no idea what you're trying to do, but maybe it's something like this:
$(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);
});
});
这篇关于无法从DOM检索jQuery克隆的表行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
