使用 jQuery 更新表格行

Posted 2023-02-16

【中文标题】使用 jQuery 更新表格行

【英文标题】：Updating Table rows using jQuery

【发布时间】：2013-06-07 08:05:12

【问题描述】：

假设你有一个 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>

你有一个 JSON 对象：

objUser = "id":12,"username":"j.smith","fname":"john","lname":"smith";

并且您想在相应的表行中更改该记录（假设该表已经有一行 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);

与最后显示的代码块相比，使用 jQuery 更新表行是否有更快/更简洁的方法？

【问题讨论】：

尝试使用：knockoutjs.com 解释***.com/questions/9159279/…

【参考方案1】：

我认为你可以做几件事

$('#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);

可能变成：

$this = $('#tr_' + objUser.id).find("td");
$this.eq(1).html(objUser.id);
// And so on

如果它已经存在，你可以直接替换

if ($('#tr_' + objUser.id).length) 
    var newHtml = '<td>' + .objUser.username + '</td>'
            + '<td>' + objUser.fname + '</td>'
            + '<td>' + objUser.lname + '</td>';
    $('#tr_' + objUser.id).html(newHtml);

【讨论】：

一些值得思考的想法！谢谢！

【参考方案2】：

$(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]]);
    );
);

jsFiddle code

【讨论】：

+1 因为我认为这是一个非常有趣的答案！谢谢，

【参考方案3】：

这不是一个好的解决方案，但有点短

 for(var i = 0; i < objUser.length; i++)
 
    $('#tr_' + objUser.id).find("td").eq(i + 1).html(Object.keys(objUser)[i]);
 

【讨论】：

你能引用一个 JSON 对象'objUser[i]'，如果键本身不是数字，那么 i 是一个数字键？

【参考方案4】：

你可以在 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;
);

也许它更长，但你可以忘记 attr 名称。 @jQuery00 给出的答案较短，但我无法运行它...

【参考方案5】：

顺便说一句，您的起始 HTML 有 3 个 <TD> 单元格，其 ID 位于 <TR> 中，而您的 javascript 会创建 4 个 <TD> 单元格，其 ID 位于其中之一中。

如果您可以将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);
);

否则，如果您假设 JSON 对象的顺序和单元格的顺序将保持一致，您可以按照@jQuery00 的建议进行操作。如果您不希望将 id 作为单元格，则从 1 开始计数器除外。在这种情况下，我建议 children() 而不是 find()，因为它只查看 <TR> 的直接子代，而不是所有可能的后代。