更新

对于那些我没有尝试实现的人来说，按顺序插入一列的按钮，当列有3时，它将移动到下一行。

Initial row creation

按钮单击一次

再次按一下按钮

Answer 1

我无法理解您提供的数据。但根据我的理解：

 function remove(obj){
    obj.innerHTML=""; 
}


 function createTable(var arr){
    var tab="<table>";
    for(var i=0;i<ar.length/3;i++){
       tab+="<tr>";
       for(var j=0;j<3;j++)
           tab+='<td onclick="remove(this);">'+arr[i+j]+'</td>';
       tab+="</tr>";
     }
    if(arr.length%3!=0){
      tab+='<tr>'; 
      for(var i=0;i<3;i++)
         if(i<arr.length)
              tab+='<td onclick="remove(this);">'+arr[i+j]+'</td>';
         else
               tab+='<td></td>';
      tab+='</tr>';
    }
    tab+="</table>"
    document.getElementById("Boh").innerHTML=tab;
    }

    }

Answer 2

是的，例如可以使用Javascript的table.insertRow和table.insertCell（http://www.w3schools.com/jsref/met_table_insertrow.asp）

试试这个：

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
<tr id="row_0">
<td>0,0</td>
</tr>

</table><br>

<button onclick="myFunction()">Try it</button>

<script>
row_nr=0;
col_nr=1;
function myFunction() {
    var table = document.getElementById("myTable");
    var row = document.getElementById("row_"+row_nr);
    var cell = row.insertCell(col_nr);
    cell.innerHTML = row_nr+","+col_nr;
    col_nr++;
    if (col_nr %3==0) {
      col_nr=0;
      row_nr++;
      var row = table.insertRow(row_nr);
      row.setAttribute("id", "row_"+row_nr);
    }

}
</script>

</body>
</html>

（％3）中的模数可以更改为所需的行长度。

演示：http://jsfiddle.net/user2314737/8k11vzyu/1/

enter image description here

这是删除按钮：

HTML

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
    <tr id="row_0">
        <td>0,0</td>
    </tr>
</table>
<br>
<button onclick="addCell()">Add</button>
<button onclick="removeCell()">Remove</button>

JS

row_nr = 0;
col_nr = 0;
row_length = 3;

function addCell() {
    var table = document.getElementById("myTable");
    var row = document.getElementById("row_" + row_nr);
    col_nr++;
    if (col_nr % row_length == 0) {
        col_nr = 0;
        row_nr++;
        row = table.insertRow(row_nr);
        row.setAttribute("id", "row_" + row_nr);
    }
    var cell = row.insertCell(col_nr);
    cell.innerHTML = row_nr + "," + col_nr;
    cell.setAttribute("id", "cell_" + row_nr + "_" + "col_nr");
}

function removeCell() {
    var row = document.getElementById("row_" + row_nr);
    row.deleteCell(col_nr);
    if (col_nr == 0) {
        col_nr = row_length-1;
        row_nr--;
    } else {
        col_nr--;
    }
}

以下是更新后的演示：http://jsfiddle.net/user2314737/8k11vzyu/6/

如何在Javascript中创建包含行和列的表

更新

2 个答案: