Question

任何人都可以帮我解决这个问题吗？我有一个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>

Answer 1

假设我的要求正确，这应该是相当简单的，这看起来如何？

实际上很难在StackOverflow上查看代码片段而是尝试查看codepen.io链接。

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

还要注意我已经删除了Ajax调用，因为模拟这是一个很痛苦并且已经将JSON作为变量包含在代码片段中你应该能够获取foeach片段并使用来自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>

Answer 2

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

＆＃13;

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)
})

＆＃13;

<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>

＆＃13;

希望有所帮助，祝你好运！

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

2 个答案: