Обновление Строки таблицы с помощью 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"}; 

И вы хотите, чтобы изменить эту запись в пределах соответствующей строке таблицы (при условии, что эта таблица содержит строку с идентификатором = «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); 
} 

Answer 2

Это не является хорошим решением, но немного короче

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

Answer 3

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

Answer 4

вы можете использовать $ .each в Jquery

var i=1;var row=$('#tr_' + objUser.id); 
$.each(objUser, function(key, element) { 
    row.find("td").eq(i + 1).html(element);i+=1; 
}); 

может быть, это больше, но вы можете забыть имя атр. ответ дается @ jQuery00 короче, но я не могу запустить его ...

Answer 5

Кстати, ваш исходный HTML имеет 3 <TD> ячейки с идентификатором, помещенного в <TR>, в то время как ваш Javascript создает 4 <TD> клетки с идентификатором, размещенным в одном из них.

Если вы можете добавить атрибут 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. За исключением запуска счетчика в 1, если вы не хотите, чтобы идентификатор был как ячейка. И я бы предложил children() за find() в этом случае, поскольку он смотрит только на прямых детей <TR>, а не на всех возможных потомков.