Fatal编程技术网
  • javascript/
  • 如何使用Javascript-For循环创建具有不同内容的表行

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

javascript

如何使用Javascript-For循环创建具有不同内容的表行,javascript,css-tables,Javascript,Css Tables,我知道如何创造，但我现在做的是更长的方式。我必须手动创建行和单元格。只是想知道我是否可以使用for loop来做这个？我看到了一些示例，但它与我的代码完全不同。有人能帮我吗 HTML: 表1.color、th.color、td.color{ 边框：1px纯黑； 边界塌陷：塌陷； } td.top{ 垂直对齐：顶部； } .尺寸{ 字体大小：90%； } th.th2{ 背景颜色：紫色； 文本对齐：左对齐； } 细胞色素{ 背景色：#FFCCFF； 文本对齐：左对齐； } td.2{ 背景色：#

我知道如何创造，但我现在做的是更长的方式。我必须手动创建行和单元格。只是想知道我是否可以使用for loop来做这个？我看到了一些示例，但它与我的代码完全不同。有人能帮我吗

HTML:


表1.color、th.color、td.color{
边框：1px纯黑；
边界塌陷：塌陷；
}
td.top{
垂直对齐：顶部；
}
.尺寸{
字体大小：90%；
}
th.th2{
背景颜色：紫色；
文本对齐：左对齐；
}
细胞色素{
背景色：#FFCCFF；
文本对齐：左对齐；
}
td.2{
背景色：#CC99FF；
文本对齐：左对齐；
}
td.cellC{
颜色：红色；
}
td.cellHover:hover{
背景色：#FF33FF；
光标：指针；
}
td.CellHover 2：悬停{
背景色：#CC00FF；
光标：指针；
}
.尺寸{
字体大小：90%；
}
td.colspan{
背景色：#C8C8C8；
}
不
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
单击我
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>


函数myFunction（）{
var table=document.getElementById（“myTable”）；
var row1=table.insertRow（2）；
行1.setAttribute（“类”、“大小”）；
var cell1a=row1.insertCell（0）；
cell1a.setAttribute（“类别”、“颜色”）；
var cell1b=row1.insertCell（1）；
cell1b.setAttribute（“类别”、“颜色”）；
var-cell1c=行1.insertCell（2）；
cell1c.setAttribute（“类”、“颜色”）；
var cell1d=row1.insertCell（3）；
cell1d.setAttribute（“类”、“颜色”）；
var cell1e=row1.insertCell（4）；
cell1e.setAttribute（“类”、“颜色”）；
var cell1f=row1.insertCell（5）；
cell1f.setAttribute（“类”、“颜色”）；
var cell1g=row1.insertCell（6）；
cell1g.setAttribute（“类”、“颜色”）；
var-cell1h=row1.insertCell（7）；
cell1h.setAttribute（“类”、“颜色”）；
var cell1i=row1.insertCell（8）；
cell1i.setAttribute（“类”、“颜色”）；
var cell1j=row1.insertCell（9）；
cell1j.setAttribute（“类别”、“颜色”）；
var cell1k=row1.insertCell（10）；
cell1k.setAttribute（“类”、“颜色”）；
var cell1l=row1.insertCell（11）；
cell1l.setAttribute（“类”、“颜色”）；
var cell1n=row1.insertCell（12）；
cell1n.setAttribute（“类”、“颜色”）；
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=“年”；
cell1n.innerHTML=“kick”；
var row2=table.insertRow（2）；
行2.setAttribute（“类”、“大小”）；
var cell2a=row2.insertCell（0）；
cell2a.setAttribute（“类别”、“颜色”）；
var cell2b=行2.insertCell（1）；
cell2b.setAttribute（“类别”、“颜色”）；
var cell2c=row2.insertCell（2）；
cell2c.setAttribute（“类别”、“颜色”）；
var cell2d=row2.insertCell（3）；
cell2d.setAttribute（“类”、“颜色”）；
var cell2e=row2.insertCell（4）；
cell2e.setAttribute（“类别”、“颜色”）；
var cell2f=row2.insertCell（5）；
cell2f.setAttribute（“类”、“颜色”）；
var cell2g=row2.insertCell（6）；
cell2g.setAttribute（“类”、“颜色”）；
var-cell2h=row2.insertCell（7）；
setAttribute（“类”、“颜色”）；
var cell2i=row2.insertCell（8）；
cell2i.setAttribute（“类”、“颜色”）；
var cell2j=row2.insertCell（9）；
cell2j.setAttribute（“类”、“颜色”）；
var cell2k=row2.insertCell（10）；
cell2k.setAttribute（“类”、“颜色”）；
var cell2l=row2.insertCell（11）；
cell2l.setAttribute（“类”、“颜色”）；
var cell2n=row2.insertCell（12）；
cell2n.setAttribute（“类”、“颜色”）；
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（“已禁用”）；
}
Fiddler:

如果这些元素的内容、属性是静态的，或者如果存在任何模式，则可以使用for循环执行此操作。否则，您必须手动将其删除。比如说，如果你想用相同的图像创建相同的图像元素100次，那么你可以用for循环来完成。如果每次图片都随机更改，则不能。通常情况下，您会将数据存储在一个数组中，然后在该数组中迭代以创建行，而不是混合内容数据和dom创建。您是否有包含每行信息的数据结构？这将是很好的添加到您的问题-只有随机静态文本的最佳方式是放弃javascript，只做html表格。我有解决办法，但我想知道这一点的原因，所以我可以在这样的方式帮助。你打算使用JQuery吗？@Zul Hazmi，你期待解决方案吗？ 
<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>