JavaScript动态表头与表列的精彩展现:一种实用的实现方法
以下是基本的HTML结构和JavaScript代码:
```html
//初始化表列
var t_column = ["col_head"];
for(var m=0; m<10; m++){
t_column.push("col"+m);
}
//初始化表行
var t_row = [];
for(var m=0; m<5; m++){
t_row.push("row"+m);
}
function generateTable() {
var tableContainer = document.getElementById('tableContainer');
tableContainernerHTML = ""; // 清空容器内容
var table = document.createElement('table');
table.width = "95%";
table.border = "1";
// 创建表头
var trHead = document.createElement('tr');
for(var i=0; i
var th = document.createElement('th');
thnerHTML = t_column[i];
trHead.appendChild(th);
}
table.appendChild(trHead);
// 创建表行和单元格
for(var j=0; j
var tr = document.createElement('tr');
var tdHead = document.createElement('td');
tdHeadnerHTML = t_row[j];
tr.appendChild(tdHead);
for(var k=1; k
var td = document.createElement('td');
tdnerHTML = "value"+k; // 这里可以根据实际需要填充数据,如从数据库获取等。
tr.appendChild(td);
}
table.appendChild(tr);
}
}