循环遍历最后一个 td 以在每个 tr jquery 中附加数据答案

【问题标题】：Loop through last td to append data in each tr jquery循环遍历最后一个 td 以在每个 tr jquery 中附加数据
【发布时间】：2018-11-23 09:41:24
【问题描述】：

谁能帮我解决这个问题？我有以下的ajax调用返回。我希望下面的 ajax 调用返回在表中，我希望它附加到表 tr 和每个 tr 的最后一个 td 循环通过 puse。

我当前的代码：

   "pid": "1",
   "pcode": "drug-001",
   "pname": "Abacavir (ABC) ",
   "pdosage": "3/4/4",
   "puse": [
         {
            "adDate": "2018-06-11",
            "adTime": "19:01:06"
         },
         {
            "adDate": "2018-06-11",
            "adTime": "19:01:06"
         }
      ]
   },
   {
      "pid": "2",
      "pcode": "drug-002",
      "pname": "Abacavir (ABC) ",
      "pdosage": "3/4/4",
      "puse": [
         {
            "adDate": "2018-06-11",
            "adTime": "19:01:06"
         },
         {
            "adDate": "2018-06-11",
            "adTime": "19:14:26"
         }
      ]
   },
   {
      "pid": "3",
      "pcode": "drug-003",
      "pname": "a-B-Artemether Injection",
      "pdosage": "3/4/4",
      "puse": [
         {
            "adDate": "2018-06-11",
            "adTime": "19:01:06"
         }
      ]
   },
   {
      "pid": "4",
      "pcode": "drug-004",
      "pname": "Acetazolamide",
      "pdosage": "3/4/4",
      "puse": []
   },
   {
      "pid": "5",
      "pcode": "drug-005",
      "pname": "Acetazolamide",
      "pdosage": "3/4/4",
      "puse": []
   }
]

$.ajax({
  type: "POST",
  url: 'call.php',
  dataType: "json",
  data: {},
  success: function(data) {
    $.each(data, function(key, val) {
      $('#PatientTreatment').append('<tr><td>' + val.pname +
        '</td><td>' + val.pcode + '</td><td>' + val.pdosage + '</td><td>' + val.pdisc +
        '</td><td class="test"></td><td id="td' + val.pid + '"></td></tr>')

      $.each(val.puse, function(key, valb) {
        append('<div>' + valb.adDate + adTime + '</div>')
      });
    });
  }
})

<html>
  <table>
    <tr>
      <td>drug-001</td>
      <td>Abacavir (ABC) </td>
      <td>pdosage</td>
      <td class="test">
        <div>2018-06-11 19:01:06</div>
        <div>2018-06-11 19:01:06</div>
      </td>

    </tr>
  </table>
</html>

【问题讨论】：

你能把你的代码放到jfiddle吗？
@user979331 建议使用code snippet，而不是建议使用像 JSFiddle 这样可能会失败（因此问题变得无用）的场外资源。也就是说，由于它依赖于 AJAX 调用，我看不到它在任何可重现的环境中工作，所以我保持代码原样并清理它。

标签： javascript jquery ajax html-table

【解决方案1】：

你已经很接近了！这是一种稍微不同的方法，它以编程方式创建 jQuery 对象以便于使用，而不是构建一个巨大的字符串。这是一个示例笔：https://codepen.io/anon/pen/bKRJNj

var data = [
    {
      "pid": "1",
      "pcode": "drug-001",
      "pname": "Abacavir (ABC) ",
      "pdosage": "3/4/4",
      "puse": [
        {
          "adDate": "2018-06-11",
          "adTime": "19:01:06"
        },
        {
          "adDate": "2018-06-11",
          "adTime": "19:01:06"
        }
      ]
    },
    {
      "pid": "2",
      "pcode": "drug-002",
      "pname": "Abacavir (ABC) ",
      "pdosage": "3/4/4",
      "puse": [
        {
          "adDate": "2018-06-11",
          "adTime": "19:01:06"
        },
        {
          "adDate": "2018-06-11",
          "adTime": "19:14:26"
        }
      ]
    }
    // Truncated for readability
]

$(function() {
  // Save a reference to the table rather than query the DOM for each loop of .each()
  var $table = $('#PatientTreatment tbody')
  var tableRows = []
  $.each(data, function(index, value) {
    var $tr = $('<tr />');
    var $pNameTd = $('<td />').text(value.pname)
    var $pCodeTd = $('<td />').text(value.pcode)
    var $pDosageTd = $('<td />').text(value.pdosage)
    var $pIdTd = $('<td />').text(value.pid)
    var $pUseTd = $('<td />')
    $.each(value.puse, function(index2, value2) {
      var $div = $('<div />').text(value2.adDate + ' ' + value2.adTime)
      // Put each DIV in the TD
      $pUseTd.append($div)
    })
    // Put all of the TDs in the TR
    $tr.append([$pNameTd, $pCodeTd, $pDosageTd, $pIdTd, $pUseTd])
    tableRows.push($tr)
  })
  // Put all of the TRs in the TABLE
  $table.append(tableRows)
})

<html>
  <head></head>
  <body>
    <table id="PatientTreatment">
      <thead>
        <tr>
          <th>Name</th>
          <th>Code</th>
          <th>Dosage</th>
          <th>ID</th>
          <th>Uses</th>
        </tr>
      </thead>
      <tbody>
        <!-- Rows dynamically inserted here -->
      </tbody>
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

希望对您有所帮助，祝您好运！

【讨论】：

【解决方案2】：

假设我满足您的要求，这应该很容易完成，这看起来如何？

在 StackOverflow 上实际上很难查看代码 sn-p 尝试查看 codepen.io 链接。

我使用td:nth-child(4) 作为选择器来获得您想象的当前行中的第 4 个 td（因为我们仍在封闭的 foreach 内部，所以我们仍然在 TR 元素“内部”。

还请注意，我已经删除了 Ajax 调用，因为模拟这是一种痛苦，并将 JSON 作为变量包含在 sn-p 中，您应该能够使用 foeach sn-p 并将其应用到您自己的代码中来自 AJAX 的数据。

$.each(data, function(key, val) {
  $('table > tbody').append('<tr><td>' + val.pname + '</td><td>' + val.pcode + '</td> <td>' + val.pdosage + '</td><td>' + val.pdisc +
    '</td><td class="test"></td><td id="td' + val.pid + '"></td></tr>')
  console.log(val.puse);
  $.each(val.puse, function(key, valb) {
    $('table > tbody td:nth-child(4) ').append('<div>' + valb.adDate + " " + valb.adTime + '</div>')
  });
});

https://codepen.io/anon/pen/ZRyPGR?editors=1010#0

var data = [{
  "pid": "1",
  "pcode": "drug-001",
  "pname": "Abacavir (ABC) ",
  "pdosage": "3/4/4",
  "puse": [{
      "adDate": "2018-06-11",
      "adTime": "19:01:06"
    },
    {
      "adDate": "2018-06-11",
      "adTime": "19:01:06"
    }
  ]
}, {
  "pid": "2",
  "pcode": "drug-002",
  "pname": "Abacavir (ABC) ",
  "pdosage": "3/4/4",
  "puse": [{
      "adDate": "2018-06-11",
      "adTime": "19:01:06"
    },
    {
      "adDate": "2018-06-11",
      "adTime": "19:14:26"
    }
  ]
}, {
  "pid": "3",
  "pcode": "drug-003",
  "pname": "a-B-Artemether Injection",
  "pdosage": "3/4/4",
  "puse": [{
    "adDate": "2018-06-11",
    "adTime": "19:01:06"
  }]
}, {
  "pid": "4",
  "pcode": "drug-004",
  "pname": "Acetazolamide",
  "pdosage": "3/4/4",
  "puse": []
}, {
  "pid": "5",
  "pcode": "drug-005",
  "pname": "Acetazolamide",
  "pdosage": "3/4/4",
  "puse": []
}]

//wrap this in your ajax success callback
$.each(data, function(key, val) {
  $('table > tbody').append('<tr><td>' + val.pname + '</td><td>' + val.pcode + '</td> <td>' + val.pdosage + '</td><td>' + val.pdisc +
    '</td><td class="test"></td><td id="td' + val.pid + '"></td></tr>')
  console.log(val.puse);
  $.each(val.puse, function(key, valb) {
    $('table > tbody td:nth-child(4) ').append('<div>' + valb.adDate + " " + valb.adTime + '</div>')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <table class="table table-inline">
    <tbody>

    </tbody>
  </table>

</html>

【讨论】：

感谢您的回复，但我将使用 Marlorn 方法