javascript - 将表 id 与对象键匹配？

Question

我在每个表格单元格上都有一个带有 id 的表格。每个 id 在 Javascript 对象中都有匹配的键。 Ajax 调用将返回带有值的对象。如果键与单元格 ID 匹配，我想循环遍历表格并为每个表格单元格分配值。这是示例:

HTML 表格:

<table class="tblData">
    <tr>
        <th>Last Name</th>
        <td id="st_lname"></td>
    </tr>
    <tr>
        <th>First Name</th>
        <td id="st_fname"></td>
    </tr>
    <tr>
        <th>DOB</th>
        <td id="st_dob"></td>
    </tr>
</table>

Javascript:

$.ajax({
    type: 'POST',
    url: 'Components/getRecords.cfc?method='+getMethod,
    data: {'userID':userID},
    dataType: 'json'
}).done(function(obj){
    if(obj.STATUS == 200){
        //Here I can access my obj.DATA values and get the key for each value
        $('.tblData table tr td').each(function(){
            $(this).attr('id').toUpperCase();
        });

        return true;
    }else{
        return false;
    }
}).fail(function(jqXHR, textStatus, errorThrown){
    alert(errorThrown);
});

这是我收到服务器响应后对象的外观:

{"STATUS":200,"DATA":{"ST_DOB":"03/16/2010","ST_FNAME":"John","ST_LNAME":"Miller"}}

成功返回后，我想按照上面提到的方式循环遍历表格，并在每个表格单元格 ID 的对象中找到匹配的键，并将值分配给该单元格。如果有人可以提供帮助，请告诉我。谢谢。

Answer 1

您的选择器不正确。它应该是.tblData tr td。您可以使用 jQuery 的 text() 分配值方法

var res = {
  "STATUS": 200,
  "DATA": {
    "ST_DOB": "03/16/2010",
    "ST_FNAME": "John",
    "ST_LNAME": "Miller"
  }
};

$('.tblData tr td').each(function(i, ele) {
  var id = $(ele).attr('id').toUpperCase();
  var value = res.DATA[id];
  if (value) {
    $(ele).text(value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tblData">
  <tr>
    <th>Last Name</th>
    <td id="st_lname"></td>
  </tr>
  <tr>
    <th>First Name</th>
    <td id="st_fname"></td>
  </tr>
  <tr>
    <th>DOB</th>
    <td id="st_dob"></td>
  </tr>
</table>