# 使用innerHTML输出一个10行5列的table,边框为1,居中显示, 要求:只有第一列显示序号(循环),除了表头外,其他行背景间隔变为浅绿色。
时间: 2024-03-02 15:52:33 浏览: 153
JavaScript获取table中某一列的值的方法
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<style>
table {
border-collapse: collapse;
margin: auto;
text-align: center;
}
th, td {
padding: 10px;
border: 1px solid black;
}
tr:nth-child(odd) {
background-color: #d9f7e5;
}
</style>
</head>
<body>
<script>
var table = document.createElement("table");
table.border = "1";
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.innerHTML = "序号";
var th2 = document.createElement("th");
th2.innerHTML = "列1";
var th3 = document.createElement("th");
th3.innerHTML = "列2";
var th4 = document.createElement("th");
th4.innerHTML = "列3";
var th5 = document.createElement("th");
th5.innerHTML = "列4";
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
tr.appendChild(th5);
table.appendChild(tr);
for (var i = 1; i <= 10; i++) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = i;
var td2 = document.createElement("td");
td2.innerHTML = "数据" + i + "-1";
var td3 = document.createElement("td");
td3.innerHTML = "数据" + i + "-2";
var td4 = document.createElement("td");
td4.innerHTML = "数据" + i + "-3";
var td5 = document.createElement("td");
td5.innerHTML = "数据" + i + "-4";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
if (i % 2 == 0) {
tr.style.backgroundColor = "#e6ffe6";
}
table.appendChild(tr);
}
document.body.appendChild(table);
</script>
</body>
</html>
```
这段代码使用 JavaScript 动态创建了一个 10 行 5 列的表格,其中第一列显示序号,其他列显示数据。表格的边框为 1,居中显示。除了表头外,奇数行的背景色为浅绿色。可以根据需要修改表格的样式和数据。
阅读全文