使用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更新表行,而不是最后显示的代码块？

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

可能成为:

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