【问题标题】:Match table id with the object key?将表 ID 与对象键匹配?
【发布时间】:2017-06-02 16:25:50
【问题描述】:

我在每个表格单元格上都有带有 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 找到匹配的键,并将值分配给该单元格。如果有人可以提供帮助,请告诉我。谢谢你。

【问题讨论】:

  • 这是一个错误吗?还是您希望有人为您编写解决方案?
  • 我正在尝试找到使用对象键查找匹配 id 的最佳方法。我不需要有人写解决方案。谢谢。

标签: javascript jquery javascript-objects


【解决方案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>

【讨论】:

    猜你喜欢
    • 2018-05-07
    • 1970-01-01
    • 2017-04-12
    • 1970-01-01
    • 2021-09-27
    • 1970-01-01
    • 1970-01-01
    • 2016-02-22
    • 1970-01-01
    相关资源
    最近更新 更多