帮我写动态生成表格的js代码 
时间: 2023-03-31 13:00:23 浏览: 31
好的,以下是动态生成表格的js代码:
```javascript
function createTable(data) {
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
// 创建表头
for (var i = ; i < data.headers.length; i++) {
var th = document.createElement('th');
th.appendChild(document.createTextNode(data.headers[i]));
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
// 创建表格内容
for (var i = ; i < data.rows.length; i++) {
var tr = document.createElement('tr');
for (var j = ; j < data.rows[i].length; j++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(data.rows[i][j]));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
}
// 使用示例
var data = {
headers: ['姓名', '年龄', '性别'],
rows: [
['张三', 18, '男'],
['李四', 20, '女'],
['王五', 22, '男']
]
};
var table = createTable(data);
document.body.appendChild(table);
```
希望能帮到你!
相关推荐







可以使用 JavaScript 动态生成表格,并在点击每一行时获取该行的数据。以下是一个简单的示例:
HTML 代码:
html
姓名
年龄
性别
JavaScript 代码:
js
// 要显示的数据
var data = [
{name: "张三", age: 18, gender: "男"},
{name: "李四", age: 20, gender: "女"},
{name: "王五", age: 22, gender: "男"}
];
// 动态生成表格
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
row.innerHTML = "<td>" + data[i].name + "" + data[i].age + " " + data[i].gender + " ";
tbody.appendChild(row);
}
// 点击行获取数据
tbody.addEventListener("click", function(event) {
var row = event.target.parentNode;
var name = row.cells[0].innerText;
var age = row.cells[1].innerText;
var gender = row.cells[2].innerText;
console.log("姓名:" + name + ",年龄:" + age + ",性别:" + gender);
});
以上代码会根据 data 数组中的数据动态生成表格,并在用户点击每一行时获取该行的数据。在这个示例中,我们使用了事件委托来监听整个 tbody 元素的点击事件,然后根据点击事件获取对应的行和单元格数据。




### 回答1:
代码:
姓名
分数
张三
50分
李四
20分
### 回答2:
您好,以下是使用JavaScript生成一个表格的代码:
javascript
// 创建表格
var table = document.createElement("table");
// 创建表头
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.textContent = "姓名";
var th2 = document.createElement("th");
th2.textContent = "分数";
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);
table.appendChild(thead);
// 创建表格内容
var tbody = document.createElement("tbody");
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
td1.textContent = "张三";
var td2 = document.createElement("td");
td2.textContent = "50分";
tr1.appendChild(td1);
tr1.appendChild(td2);
tbody.appendChild(tr1);
var tr2 = document.createElement("tr");
var td3 = document.createElement("td");
td3.textContent = "李四";
var td4 = document.createElement("td");
td4.textContent = "20分";
tr2.appendChild(td3);
tr2.appendChild(td4);
tbody.appendChild(tr2);
table.appendChild(tbody);
// 将表格添加到页面中
document.body.appendChild(table);
以上代码通过使用JavaScript的DOM操作,创建了一个包含姓名和分数的表格,并将其添加到页面中。其中张三的分数为50分,李四的分数为20分。
### 回答3:
可以使用JavaScript来生成一个包含张三和李四考试成绩的表格代码。以下是一个示例:
javascript
// 创建一个包含考试成绩的数组
var scores = [
{ name: "张三", score: 50 },
{ name: "李四", score: 20 }
];
// 创建表格代码的函数
function generateTableCode(scores) {
var tableCode = "";
tableCode += "姓名 成绩 ";
// 遍历考试成绩数组并添加表格行
for (var i = 0; i < scores.length; i++) {
tableCode += "<tr>";
tableCode += "<td>" + scores[i].name + "";
tableCode += "" + scores[i].score + " ";
tableCode += "";
}
tableCode += "";
return tableCode;
}
// 调用函数生成表格代码
var tableCode = generateTableCode(scores);
// 打印表格代码
console.log(tableCode);
这段代码首先创建了一个包含张三和李四考试成绩的数组。然后定义了一个函数generateTableCode(),该函数接受一个成绩数组作为参数,并使用遍历来生成包含学生姓名和成绩的表格代码。最后,调用函数generateTableCode(),将生成的表格代码存储在变量tableCode中,并打印出来。






