2

我需要动态地将一些值插入到 html 表中。例如，我有一些输入，然后我有一个表（大约 5 行），所以我有一个启用计时器的按钮。当计时器停止时，我需要将数据插入表中。

这是代码，如何将数据添加到一行？

document.getElementById('d1').innerHTML = document.getElementById('ctrl_ball_size_val').value;
document.getElementById('l1').innerHTML = document.getElementById('ctrl_cilindr_height_val').value;
document.getElementById('t1').innerHTML = document.getElementById('stopwatch').value;

如何将数据（数据可以不同）逐行添加到表中？

4

2 回答 2

1

强烈建议避免在此任务中使用 innerHTML。我建议使用 DOM 来实现这一点。

下面是一个关于如何使用 JavaScript 动态创建 HTML 表格的快速示例：

var tbl = document.createElement("table");

for(var i=0;i<=10;i++){
    var tr = document.createElement("tr");

    for(var j=0;j<=10;j++){
        var td = document.createElement("td");
        td.innerHTML = i*j;
        tr.appendChild(td);
    }
    tbl.appendChild(tr);
}

document.body.appendChild(tbl);

查看我的Live 示例

于 2013-04-07T08:05:20.483 回答
0

如果您使用的是 JQuery 只需使用：

$('#tableID > tbody  > tr').each(function() { //Acess $(this) });

然后你永远不需要它？

根据jQuery 表格行中的每个循环，只需一些代码：

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}
于 2013-04-07T08:09:33.110 回答