如何使用从AJAX响应接收的JSON数据更新基于ID的表行

时间:2015-07-29 12:40:19

标签: javascript jquery ajax json

我有一个json响应对象,我需要使用来自jquery的id更新具有id的行和td的表行,以便每当我调用ajax函数时,使用json对象更新表的所有值。请帮帮我,我在这里添加代码。任何帮助都会很明显......问候

AJAX:

$.ajax({
        type: 'POST',
        url: URI_PREFIX+'/getDetails',
        data: JSON.stringify({devId}),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
       }).done(function (data, textStatus, jqXHR) {

                  if(jqXHR.status==206){
                   alert("Invalid Username or Password");
                  }
                  else if(jqXHR.status==412){
                   alert("Your Acount is not activated");
                  }
                  else if(jqXHR.status==200){
                      var newData = data.masters;

                      $.each(newData, function(i, item) {

                          $('#branch2 td').
                            var $tr = $('<tr>').append(
                                $('<td>').text(item.rank),
                                $('<td>').text(item.content),
                                $('<td>').text(item.UID)
                            ); //.appendTo('#records_table');
                            console.log($tr.wrap('<p>').html());
                        });


                  }

                 });

表:

<table class="table table-bordered"
                                style="width: 100%; margin-top: 20px;" id="descTable">
                        <thead style="text-align: center;">
                            <tr>
                                <th class="color"></th>
                                <th class="color">Amp</th>
                                <th class="color">Volt</th>
                                <th class="color">PF</th>
                                <th class="color">Watt</th>
                                <th class="color">Kwh</th>
                                <th class="color">Lrh</th>
                                <th class="color">Temp1</th>
                                <th class="color">Temp2</th>
                            </tr>
                                </thead>
<tbody style="text-align: center;" class="omega">

                            <tr class="color1" id="branch1">
                                <td>Branch1 Real Values</td>
                                <td class="optAmp" style="font-family: 'calc'">ajax value</td>
                                <td class="optVolt" style="font-family: 'calc'">ajax value</td>
                                <td class="optPf" style="font-family: 'calc'">ajax value</td>
                                <td class="optWatt" style="font-family: 'calc'">ajax value</td>
                                <td class="optKwh" style="font-family: 'calc'">ajax value</td>
                                <td class="optLhr" style="font-family: 'calc'">ajax value</td>
                                <td class="optTmp1" style="font-family: 'calc'">ajax value</td>
                                <td class="optTmp2" style="font-family: 'calc'">ajax value</td>
                            </tr>
</tbody>
</table>

1 个答案:

答案 0 :(得分:0)

要在tr中使用class="optAmp"访问td(例如,使用id="brach1"进行访问),您可以使用$('tr#branch1 td.optAmp')

所以为了改变它的价值,你可以在每个函数中做到:

$('tr#branch1 td.optAmp').text(item.optAmp); // I assume your item object has that property
$('tr#branch1 td.rank').text(item.rank);
// and on ...