Question

的javascript

function appendRow() {
    rn = window.prompt("Input number of rows", 1);

 for(var r=0;r<parseInt(rn,10);r++)
  {
   var x=document.getElementById('tbl').insertRow(r);
   }

}

问题

我在桌子底部添加一行时遇到问题。
颜色没有改变

HTML

<style type="text/css">
.high-light{background:blue;}
</style>

    <form>
    <input type="button"  value=" append a new row " onclick="appendRow()" /><br />
    </form>

Answer 1

我在html中添加了表格标签。实际上它的附加。在row没有任何单元格的情况下不可见。添加一些单元格值。添加时间行的类名称

function appendRow() {
  var rn = window.prompt("Input number of rows", 1);

  for (var r = 0; r < parseInt(rn, 10); r++) {

    var row = document.getElementById('tbl').insertRow(r)
    row.classList.add("high-light")
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    // Add some text to the new cells:
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
  }

}

.high-light {
  background: blue;
}

<form>
  <input type="button" value=" append a new row " onclick="appendRow()" /><br />
</form>
<table id="tbl" border="1">


</table>

Answer 2

如果您希望最后一行具有不同的颜色，那么只需设置一个条件，检查循环是否已达到从提示减1中检索到的数字。这将意味着您已到达将要插入的最后一行，并且然后只需设置属性，因此：

var button = document.getElementById("button").onclick=appendRow;
var table = document.getElementById("tbl");
var body = document.body;

function appendRow() {
    rn = window.prompt("Input number of rows", 1);

 for(var r=0;r<parseInt(rn,10);r++)
  {
     var tr = table.insertRow(-1);
     var td = tr.insertCell();
     if (r == parseInt(rn,10)-1){
     	tr.setAttribute("style", "background:green");
     }
     td.appendChild(document.createTextNode('New Cell'));
     
   }
		body.appendChild(table);
}

.high-light{background:blue;}

    <form>
    <input id = "button" type="button"  value=" append a new row "  /><br />
    </form>
    
    <table id="tbl" border="1">
    </table>

此外，如果要将行追加到末尾，则必须将-1作为参数插入insertRow，即。 insertRow(-1）

在表的末尾添加一个不同颜色的新行

2 个答案: