如何使用Javascript创建具有不同内容的表行 - For Loop

时间:2015-10-27 06:44:03

标签: javascript css-tables

我知道如何创作,但现在我做的更长。我必须手动创建行和单元格。只是想知道我是否可以使用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>

Fiddler:https://jsfiddle.net/99x50s2s/135/

0 个答案:

没有答案