jQuery将单元格动态添加到静态单元格到表格中答案

【问题标题】：jQuery add dynamically cell to a static cell into tablejQuery将单元格动态添加到静态单元格到表格中
【发布时间】：2014-08-18 07:30:37
【问题描述】：

我想创建静态/动态表。所有单元格<th> 和行的前两列<td> 都是静态的。内容其他我想使用 jQuery 脚本动态创建的单元格。

我不知道如何开始。我以 JSON 格式（数组）保存到单元格的数据为：

{
"EX1":[["1","8","16","24"]],
"EX2":[["0","100200","109f","ffffffff"]]
}

HTML：

<table id="personDataTable" style="border: 1px #e3ffg3 solid; text-align: center;">
  <tr class="bg02">
    <th colspan="2">Name</th>
    <th width="100px">Sensor 1</th>
    <th width="100px">Sensor 2</th>
    <th width="100px">Sensor 3</th>
    <th width="100px">Sensor 4</th>
  </tr>
  <tr id="row1">
    <td class="bg02">A</td>
    <td class="bg02">Out64H</td>
    <td>element[index]</td>
    <td>element[index+1]</td>
    <td>element[index+2]</td>
    <td>element[index+3]</td>
  </tr>
  <tr id="row2">
    <td class="bg02">R</td>
    <td class="bg02">In128Birh</td>
    <td>element[index]</td>
    <td>element[index+1]</td>
    <td>element[index+2]</td>
    <td>element[index+3]</td>
  </tr>
</table>

每个<tr> 中的静态文本是必需的，因为文本不在 json 文件中。可以就创建 javascript 脚本寻求帮助吗？

非常感谢

【问题讨论】：

在接受的答案中查看我的更新解决方案
谢谢。这是我接受的解决方案。

标签： javascript jquery json

【解决方案1】：

查看这个 jsfiddle：http://jsfiddle.net/9zr6z70g/3/

jQuery 代码是这样的：

var data = {
  "EX1":[["1","8","16","24"]],
  "EX2":[["0","100200","109f","ffffffff"]]
};

var data1 = data.EX1[0];
var data2 = data.EX2[0];

$(document).ready(function(){
  var row1cells = $("#row1 td");
  var row2cells = $("#row2 td");

  for (var index=0; index<4; index++) {
    $(row1cells[index+2]).html(data1[index]);
    $(row2cells[index+2]).html(data2[index]);
  }
});

对于多个 EX 数据，这样做：

var exCount = 2;

var data = {
  "EX1":[["1","8","16","24"]],
  "EX2":[["0","100200","109f","ffffffff"]]
};

$(document).ready(function(){
  for (var index=1; index<=exCount; index++) {
    var cells  = $("#row"+index+" td");
    var values = data["EX"+index][0];

    for (var jndex=0; jndex<4; jndex++) {
      $(cells[jndex+2]).html(values[jndex]);
      $(cells[jndex+2]).html(values[jndex]);
    }
  }
});

更多EX的详细信息，请参见jsfiddle：http://jsfiddle.net/9zr6z70g/7/

【讨论】：

【解决方案2】：

这段代码适合我，但是变量EX有一百多个。

var data = {
  "EX1":[["1","8","16","24"]],
  "EX2":[["0","100200","109f","ffffffff"]]
};

var data1 = data.EX1[0];
var data2 = data.EX2[0];

$(document).ready(function(){
  var row1cells = $("#row1 td");
  var row2cells = $("#row2 td");

 for (var index=0; index<4; index++) {
  $(row1cells[index+2]).html(data1[index]);
  $(row2cells[index+2]).html(data2[index]);
 }
});

我尝试使用以下 for 循环 修改代码。此解决方案无法正常工作。

var data = {
  "EX1":[["1","8","16","24"]],
  "EX2":[["0","100200","109f","ffffffff"]]
};

var data1 = data.EX1[0];
var data2 = data.EX2[0];

$(document).ready(function(){
for (j=1; j<4; j++) {
  var pom = "row"+[j]+"cells";
  var pom2 = "#row"+[j]+" td";
  var pom3 = "$"+'("'+pom2+'")';

  for (var index=0; index<4; index++) {
    $(pom3+[index+2]).html(data[j][index]);
    }
   }
 });

可以寻求帮助修改吗？谢谢

【讨论】：