我知道如何创作,但现在我做的更长。我必须手动创建行和单元格。只是想知道我是否可以使用for循环来做到这一点?我已经看过一些例子,但它与我的代码完全不同。谁能帮我?
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table.color, th.color, td.color {
border: 1px solid black;
border-collapse: collapse;
}
td.top {
vertical-align: top;
}
.size {
font-size: 90%;
}
th.th2 {
background-color: purple;
text-align: left;
}
td.cellColor {
background-color: #FFCCFF;
text-align: left;
}
td.cellColor2 {
background-color: #CC99FF;
text-align: left;
}
td.cellC {
color: red;
}
td.cellHover:hover {
background-color: #FF33FF;
cursor: pointer;
}
td.cellHover2:hover {
background-color: #CC00FF;
cursor: pointer;
}
.size {
font-size: 90%;
}
td.colspan {
background-color: #C8C8C8;
}
</style>
</head>
<body>
<table id="myTable" width="1290px" class="color">
<tr>
<th width="60px" class="th2 color">No</th>
<th width="155px" class="th2 color">Testing</th>
<th width="100px" class="th2 color">Testing</th>
<th width="55px" class="th2 color">Testing</th>
<th width="105px" class="th2 color">Testing</th>
<th width="130px" class="th2 color">Testing</th>
<th width="50px" class="th2 color">Testing</th>
<th width="110px" class="th2 color">Testing</th>
<th width="95px" class="th2 color">Testing</th>
<th width="320px" class="th2 color">Testing</th>
<th width="30px" class="th2 color">Testing</th>
<th width="40px" class="th2 color">Testing</th>
<th width="40px" class="th2 color">Testing</th>
</tr>
<tr>
<td colspan="13" class="colspan">
<p align="left" id="myBtn" onclick="myFunction()">> Click Me</p>
</td>
</tr>
</table>
</body>
</html>
JavaScript的:
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row1 = table.insertRow(2);
row1.setAttribute("class", "size");
var cell1a = row1.insertCell(0);
cell1a.setAttribute("class", "color");
var cell1b = row1.insertCell(1);
cell1b.setAttribute("class", "color");
var cell1c = row1.insertCell(2);
cell1c.setAttribute("class", "color");
var cell1d = row1.insertCell(3);
cell1d.setAttribute("class", "color");
var cell1e = row1.insertCell(4);
cell1e.setAttribute("class", "color");
var cell1f = row1.insertCell(5);
cell1f.setAttribute("class", "color");
var cell1g = row1.insertCell(6);
cell1g.setAttribute("class", "color");
var cell1h = row1.insertCell(7);
cell1h.setAttribute("class", "color");
var cell1i = row1.insertCell(8);
cell1i.setAttribute("class", "color");
var cell1j = row1.insertCell(9);
cell1j.setAttribute("class", "color");
var cell1k = row1.insertCell(10);
cell1k.setAttribute("class", "color");
var cell1l = row1.insertCell(11);
cell1l.setAttribute("class", "color");
var cell1n = row1.insertCell(12);
cell1n.setAttribute("class", "color");
cell1a.innerHTML = "ssddsa";
cell1b.innerHTML = "dfsafsa";
cell1c.innerHTML = "hais";
cell1d.innerHTML = "NA";
cell1e.innerHTML = "NT";
cell1f.innerHTML = "rrr";
cell1g.innerHTML = "aa";
cell1h.innerHTML = "czx";
cell1i.innerHTML = "qwerty";
cell1j.innerHTML = "ppppp";
cell1k.innerHTML = "ds";
cell1l.innerHTML = "year";
cell1n.innerHTML = "kick";
var row2 = table.insertRow(2);
row2.setAttribute("class", "size");
var cell2a = row2.insertCell(0);
cell2a.setAttribute("class", "color");
var cell2b = row2.insertCell(1);
cell2b.setAttribute("class", "color");
var cell2c = row2.insertCell(2);
cell2c.setAttribute("class", "color");
var cell2d = row2.insertCell(3);
cell2d.setAttribute("class", "color");
var cell2e = row2.insertCell(4);
cell2e.setAttribute("class", "color");
var cell2f = row2.insertCell(5);
cell2f.setAttribute("class", "color");
var cell2g = row2.insertCell(6);
cell2g.setAttribute("class", "color");
var cell2h = row2.insertCell(7);
cell2h.setAttribute("class", "color");
var cell2i = row2.insertCell(8);
cell2i.setAttribute("class", "color");
var cell2j = row2.insertCell(9);
cell2j.setAttribute("class", "color");
var cell2k = row2.insertCell(10);
cell2k.setAttribute("class", "color");
var cell2l = row2.insertCell(11);
cell2l.setAttribute("class", "color");
var cell2n = row2.insertCell(12);
cell2n.setAttribute("class", "color");
cell2a.innerHTML = "abc";
cell2b.innerHTML = "def";
cell2c.innerHTML = "ghi";
cell2d.innerHTML = "1";
cell2e.innerHTML = "2";
cell2f.innerHTML = "3";
cell2g.innerHTML = "4";
cell2h.innerHTML = "5";
cell2i.innerHTML = "fdsfds";
cell2j.innerHTML = "lol";
cell2k.innerHTML = "dsa";
cell2l.innerHTML = "aaaa";
cell2n.innerHTML = "b";
document.getElementById("myBtn").setAttribute('disabled');
}
</script>