jQuery+json实现动态创建复杂表格table的方法

网络编程 2025-03-13 10:38www.168986.cn编程入门

```javascript

function SetSubTable() {

// json数据

var obj = jQuery.parseJSON($("SubJsonStrValue").val());

window.ALLPARAMTERS = obj; // 将后的数据存储在全局变量中

var row_str = ""; // 存储行HTML的字符串

var span_num = 1; // 初始行跨度

// 遍历json数据

for (var i = 0; i < obj.length; i++) {

if (obj[i].ParamNames.length > 0) { // 如果当前项有参数名称

row_str += ' ' + obj[i].Name + ''; // 创建带有行跨度的表头单元格

for (var j = 0; j < obj[i].ParamNames.length; j++) { // 遍历当前项的参数名称

if (j != 0) { // 非第一个参数名称时,创建新的行

row_str += "";

}

row_str += ' ' + obj[i].ParamNames[j].Name + ''; // 创建参数名称单元格和内容单元格

for (var k = 0; k < obj[i].ParamNames[j].ListItems.length; k++) { // 遍历当前参数名称的列表项

row_str += obj[i].ParamNames[j].ListItems[k].Name+"|"; // 添加列表项名称到内容单元格中

}

row_str = row_str.substring(0, row_str.length - 2); // 删除最后一个"|"字符

row_str += ""; // 创建状态单元格(单选或多选)

if (obj[i].ParamNames[j].CanMultiSelecte) { // 如果当前参数允许多选,则添加“多选”文字到状态单元格中

row_str += "多选";

} else { // 如果不允许多选,则添加“单选”文字到状态单元格中

row_str += "单选";

}

row_str += ""; // 结束当前行

}

}

}

// 将生成的HTML字符串添加到页面中指定的元素后面(这里是id为sub_table_header的元素后面)

$("sub_table_header").after(row_str);

}

```

上一篇:在PHP中使用FastCGI解析漏洞及修复方案 下一篇:没有了

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by