Question

我需要动态地在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;

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

Answer 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 example

Answer 2

如果您正在使用JQuery，请使用：

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

你永远不需要它吗？

根据jQuery each loop in table row，只是一些代码：

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
  }
}

一步一步地浏览html表

2 个答案: