CODEWITHSUNDEEP
jqueryhtmlhtml-tablerowupdating
Florian Mertens
Florian Mertens

Reputation: 2448

Updating Table rows using jQuery

Suppose you have a html table:

<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:

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"):

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

Upvotes: 6

Views: 29757

Answers (5)

cautionbug
cautionbug

Reputation: 475

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.

If you can add an id attribute to the cells (perhaps like "td_12_username"), it would be easier to match them in a loop to ensure correct data is placed:

$.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.

Upvotes: 0

htynkn
htynkn

Reputation: 104

you can use $.each in Jquery

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...

Upvotes: 0

Shaddow
Shaddow

Reputation: 3215

$(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

Upvotes: 3

z1m.in
z1m.in

Reputation: 1661

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

Upvotes: 0

asafreedman
asafreedman

Reputation: 572

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

Upvotes: 8

Related Questions