使用jQuery更新表格行

Question

假设您有一个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更新表格行的方法？

- Florian Mertens

---

请尝试使用 http://knockoutjs.com/，如以下链接所述 http://stackoverflow.com/questions/9159279/updating-a-table-row-jquery?rq=1 - Kauê Gimenes

Answer 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);

Could become:

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

- asafreedman

---

一些值得思考的想法！谢谢！ - Florian Mertens

Answer 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

- Shaddow

---

+1 因为我认为这是一个非常有趣的答案！谢谢。 - Florian Mertens

Answer 3

这不是一个好的解决方案，但稍微短一点。

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

- z1m.in

---

如果键本身不是数字，您能引用JSON对象'objUser [i]',其中i是数值键吗？ - asafreedman

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

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

- htynkn

Answer 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>的直接子级，而不是所有可能的后代。

- cautionbug