javascript - 如果 id 匹配，则将 JSON 渲染到表中

Question

我有一个包含 5 行和 2 列的表格。每行都有一个 ID 列，范围从 1-5。

我想将 JSON 数据添加到该表中，如果该数据具有与该行匹配的 ID。如果没有数据与该行 ID 匹配，则将“无匹配记录”添加到该行的第二列。

HTML 表格

<table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td></td>
      </tr>
      <tr>
        <td>2</td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
      </tr>
      <tr>
        <td>4</td>
        <td></td>
      </tr>
      <tr>
        <td>5</td>
        <td></td>
      </tr>
    </tbody>
</table>

Json 数据

{"data":[
    {"id":"1", "lastName":"Doe"},
    {"id":"3", "lastName":"Jones"}
]}

预期结果

<table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>No Matching Record</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Jones</td>
      </tr>
      <tr>
        <td>4</td>
        <td>No Matching Record</td>
      </tr>
      <tr>
        <td>5</td>
        <td>No Matching Record</td>
      </tr>
    </tbody>
</table>

Answer 1

您可以使用 .each() 来循环每个 tr 然后使用 find() 从数据中获取对象与 td 中的文本相同的 id。

//Loop each row or tr
$('tbody tr').each(function() {
  //Get text or number from each first td in every row
  var i = $(this).find('td:first').text();
  //Find object from data with this id or current id of td
  var r = data.data.find((e) => e.id == i);
  //Select second td from current row
  var t = $(this).find('td:eq(1)');
  //If Object is found with current id add lastName as text else add dummy text or No Matching Record
  (r != undefined) ? t.text(r.lastName): t.text('No Matching Record');
});

var data = {"data":[{"id":"1", "lastName":"Doe"},{"id":"3", "lastName":"Jones"}]}

$('tbody tr').each(function() {
  var i = $(this).find('td:first').text();
  var r = data.data.find((e) => e.id == i);
  var t = $(this).find('td:eq(1)');

  (r != undefined) ? t.text(r.lastName): t.text('No Matching Record');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td></td>
    </tr>
  </tbody>
</table>

如果你想按行索引而不是 td 中的文本进行过滤，你可以只使用 $(this).index() + 1; 剩下的就是一样

var data = {
  "data": [{
    "id": "1",
    "lastName": "Doe"
  }, {
    "id": "3",
    "lastName": "Jones"
  }, ]
}

//Loop each row or tr
$('tbody tr').each(function() {
  //Get index of row
  var i = $(this).index() + 1;
  //Find object from data with this id or current id of td
  var r = data.data.find((e) => e.id == i);
  //Select second td from current row
  var t = $(this).find('td:eq(1)');
  //If Object is found with current id add lastName as text else add dummy text or No Matching Record
  (r != undefined) ? t.text(r.lastName): t.text('No Matching Record');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td></td>
    </tr>
  </tbody>
</table>