使用 jQuery 更新表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17044687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating Table rows using jQuery
提问by Florian Mertens
Suppose you have a html table:
假设你有一个 html 表：
<table id="data">
<thead>
<tr>
<td>ID</td>
<td>Username</td>
<td>First Name</td>
<td>Last Name</td>
</tr>
</thead>
<tbody>
<?php foreach($arrData as $arrRecord) { ?>
<tr id="tr_<?php echo $arrRecord["id"]; ?>">
<td><?php echo $arrRecord["username"]; ?></td>
<td><?php echo $arrRecord["fname"]; ?></td>
<td><?php echo $arrRecord["lname"]; ?></td>
</tr>
<?php }?>
</tbody>
</table>
And you have a JSON object:
你有一个 JSON 对象：
objUser = {"id":12,"username":"j.smith","fname":"john","lname":"smith"};
And you want to change that record within the corresponding table row (assuming that this table already has a row with id="tr_12"):
并且您想在相应的表行中更改该记录（假设该表已经有一个 id="tr_12" 的行）：
$('#tr_' + objUser.id).find("td").eq(1).html(objUser.id);
$('#tr_' + objUser.id).find("td").eq(2).html(objUser.username);
$('#tr_' + objUser.id).find("td").eq(3).html(objUser.fname);
$('#tr_' + objUser.id).find("td").eq(4).html(objUser.lname);
Is there a faster/cleaner way of updating table rows using jQuery, than this last shown code block?
有没有比最后显示的代码块更快/更干净的使用 jQuery 更新表行的方法？
回答by asafreedman
I think there may be a couple things you could do
我想你可以做几件事
$('#tr_' + objUser.id).find("td").eq(1).html(objUser.id);
$('#tr_' + objUser.id).find("td").eq(2).html(objUser.username);
$('#tr_' + objUser.id).find("td").eq(3).html(objUser.fname);
$('#tr_' + objUser.id).find("td").eq(4).html(objUser.lname);
Could become:
可以变成：
$this = $('#tr_' + objUser.id).find("td");
$this.eq(1).html(objUser.id);
// And so on
You could do an outright replacements if it already exists
如果它已经存在，你可以做一个彻底的替换
if ($('#tr_' + objUser.id).length) {
var newHtml = '<td>' + .objUser.username + '</td>'
+ '<td>' + objUser.fname + '</td>'
+ '<td>' + objUser.lname + '</td>';
$('#tr_' + objUser.id).html(newHtml);
}
回答by Shaddow
$(function() {
var objUser = {"id":2,"username":"j.smith","fname":"john","lname":"smith"};
var objKeys = ["username", "fname", "lname"];
$('#tr_' + objUser.id + ' td').each(function(i) {
$(this).text(objUser[objKeys[i]]);
});
});
回答by htynkn
you can use $.each in Jquery
你可以在 Jquery 中使用 $.each
var i=1;var row=$('#tr_' + objUser.id);
$.each(objUser, function(key, element) {
row.find("td").eq(i + 1).html(element);i+=1;
});
maybe it's longer,but you can forget the attr name. the answer given by @jQuery00 is shorter,but I can't run it...
也许它更长，但你可以忘记 attr 名称。@jQuery00 给出的答案较短，但我无法运行它...
回答by cautionbug
By the way, your starting HTML has 3 <TD>cells with the id placed in the <TR>, while your Javascript creates 4 <TD>cells with the id placed in one of them.
顺便说一下，您的起始 HTML 有 3 个<TD>单元格，id 放在 中<TR>，而您的 Javascript 创建了 4 个<TD>单元格，其中 id 放在其中一个中。
If you can add an idattribute to the cells (perhaps like "td_12_username"), it would be easier to match them in a loop to ensure correct data is placed:
如果您可以id为单元格添加一个属性（可能像"td_12_username"），那么在循环中匹配它们以确保放置正确的数据会更容易：
$.each(objUser, function(key, v){
// Forces to skip the "id" key, otherwise sets value into the matching <TD>
key !== "id" && $("#td_"+ objUser.id+ "_"+ key).html(val);
});
Otherwise, if you assume the order of the JSON object and order of cells will remain consistent, you could do as @jQuery00 suggested. Except start the counter at 1 if you don't want the id as a cell. And i'd suggest children()over find()in this case as it only looks at direct children of the <TR>, not all possible descendants.
否则，如果您假设 JSON 对象的顺序和单元格的顺序将保持一致，您可以按照@jQuery00 的建议进行操作。如果您不希望将 id 作为单元格，则将计数器从 1 开始。在这种情况下，我建议children()结束find()，因为它只查看 的直接子代，而<TR>不是所有可能的后代。
回答by jQuery00
It's not a good solution, but a little bit shorter
这不是一个好的解决方案，但有点短
for(var i = 0; i < objUser.length; i++)
{
$('#tr_' + objUser.id).find("td").eq(i + 1).html(Object.keys(objUser)[i]);
}
