jQuery添加动态单元格到一个静态单元格到表格中
jQuery add dynamically cell to a static cell into table
我想创建一个静态/动态表。行中所有单元格<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脚本?
Thanks very much
查看此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/
这个代码适合我,但是变量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]);
}
}
});
可以请求帮助修改吗?由于
相关文章:
- 在 SlickGrid 中编辑后,根据不同列中的另一个单元格清除单元格
- 如何在表中找到下一个直接下载的单元格
- 当单元格内容由于forumula从另一个工作表编译数据而更改时发送电子邮件
- 申请表要求在提交前一个单元格与其他单元格相等
- Javascript动态表,每个单元格都有一个onmouse事件
- 每行仅突出显示一个单元格
- Google Apps 脚本,用于根据一个单元格的值对另一个单元格进行条件颜色格式设置
- 我的桌子有一个额外的单元格
- JQuery insertAfter();移动下一个表格单元格
- 只在表中突出显示一个单元格值
- 如何根据单元格中的值将一行从一个谷歌电子表格移动到另一个
- 在动态表格单元格跨度中单击时更新一个权重值
- 如何在另一个java脚本函数中访问java脚本中动态html表中单元格的动态赋值
- 当一个单元格被编辑时,是否有一个事件触发,但值没有'不要改变
- 我希望joint.js库读取我的JSON并将其显示为一个单元格:rect和circle
- JavaScript 创建一个随机表生成器并为单元格分配颜色
- 用JQuery在廉价的excel表格上标记最后一个单元格
- 如何创建一个每行列数未知的html表,对齐列,并为每个单元格/行指定一个id
- 将单元格的高度从一个表列表指定到另一个列表
- 电子表格中的单个动态模态/ JS(而不是每个单元格一个)