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

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

javascript

如何在Javascript中创建包含行和列的表,javascript,html-table,Javascript,Html Table,我需要一些关于创建具有以下条件的动态JavaScript表的建议：每行有3列行数取决于数组中的数据数还可以根据顺序删除列值这里是一些截图我在一个数组中有4个数据更新对于不知道的人，我想实现的是，一个按钮可以按顺序插入一列，当该列有3个时，它将移动到下一行按钮点击一次再次点击按钮再次点击按钮我无法理解您提供的数据。但根据我的理解： function remove(obj){ obj.innerHTML=""; } function createTab

我需要一些关于创建具有以下条件的动态JavaScript表的建议：

每行有3列

行数取决于数组中的数据数

还可以根据顺序删除列值

这里是一些截图

我在一个数组中有4个数据

更新对于不知道的人，我想实现的是，一个按钮可以按顺序插入一列，当该列有3个时，它将移动到下一行

按钮点击一次

再次点击按钮

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

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

    }

功能删除（obj）{
obj.innerHTML=“”；
}
函数createTable（var arr）{
var-tab=“”；
对于（var i=0；iYes），例如可以使用Javascript的table.insertRow
和table.insertCell
（）
试试这个：
<!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>

以下是更新的演示：是否要与大家分享您最初的尝试，并解释您遇到的问题？您可以创建一个具有特定id的表，而不是创建一个循环，将每个数据作为行附加到表的数组中。请在中使用克隆javascript@user2314737嗨，我想知道这是否可能实现Equick演示，是w吗你在找什么？谢谢你的回答这是我想要的我可以再问一个问题吗？我也需要删除，就像添加它将如何删除从上一次开始我做了一些研究我使用相同的方法使用deleteRow，但我如何获得表的最后id谢谢
<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>

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