将动态数据附加到表行jquery

时间:2015-10-06 11:46:55

标签: javascript jquery html



var data = [{
  "mathid": "015-08-0011-000-01",
  "mathid1": "342-432-423-000",

  "englishid": "015-08-0011-000-01-1001",
  "englishid1": "342-432-423-000",

  "scienceid": "015-08-0011-000-01-2001",
  "scienceid1": "342-432-423-000"

}, {
  "mathid": "015-08-0011-000-02",
  "mathid1": "342-432-423-001",

  "englishid": "015-08-0011-000-01-1002",
  "englishid1": "342-432-423-001",

  "scienceid": "015-08-0011-000-01-2002",
  "scienceid1": "342-432-423-001"
}]


var tr;
var td;
for (var i = 0; i < data.length; i++) {
  tr = $('<tr/>');
  td = $('<td/>');
  if (data[i].mathid) {
    tr.append("<td id=''>" + data[i].mathid + "</td>");
    tr.append("<td id=''>" + data[i].mathid1 + "</td>");
  }
  if (data[i].englishid) {
    tr.append("<td id=''>" + data[i].englishid + "</td>");
    tr.append("<td id=''>" + data[i].englishid1 + "</td>");
  }
  if (data[i].scienceid) {
    tr.append("<td id=''>" + data[i].scienceid + "</td>");
    tr.append("<td id=''>" + data[i].scienceid1 + "</td>");
  }
  tr.append("<td id=''>" + "<a class=  id= href='#' >View Details</a>" + "</td>");
  $("#searchresult").append(tr);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="searchresult">
  <thead>
    <tr>
      <td>Subject id</td>
      <td>Subject id1</td>
    </tr>
  </thead>
</table>
&#13;
&#13;
&#13;

在我的演示中,我想将主题ID和id1添加到表中。我希望将每个主题添加到每一行,并将每个id添加到每个td。有些东西弄乱了追加,我无法弄清楚是什么。我不明白是什么弄乱了我的追加。

任何想法都表示赞赏。

预期产出:

Subjectid | subjectid1
_______________________
mathid    | mathid1
_______________________
scienceid | scienceid1
_______________________
englishid | englishid1

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/pmyfq93z/

这就是你追求的吗?如果是这样,阵列设置错误。 您将所有信息作为数组中的一个项目进行处理,此处它已被拆分,以便将其放入正确的单元格中。

var data = [{
  "mathid": "015-08-0011-000-01",
  "mathid1": "342-432-423-000"},
            {
  "englishid": "015-08-0011-000-01-1001",
  "englishid1": "342-432-423-000"},
            {
  "scienceid": "015-08-0011-000-01-2001",
  "scienceid1": "342-432-423-000"

}]