Question

我正在试图弄清楚如何使用Javascript向表中添加新行，但我还需要能够在此表中添加3列，这里是我遇到问题的地方。我似乎无法让它发挥作用。这是javascript：

这会添加行，第一个字段是ID输入第一行，但我不知道如何填写列。

function myCreateFunction() {

var table = document.getElementById("myTable");
var add = 1;

for (var i = 0; i < add; i++) {

    var row = table.insertRow(2);
    var cell1 = row.insertCell(0);

    var div1 = document.createElement('div');
    div1.innerHTML = "ID";
    cell1.appendChild(div1);
    div1.contentEditable = true;

  }
  }

这是我的表：

<table id="myTable">
  <tr> 
     <td>ID</td>
     <td>First Name</td>
     <td>Last Name</td>
     <td>Add More</td>
  </tr>
  <tr>
     <td>1</td>
     <td>Jelly</td>
     <td>Beans</td>
     <td><button onclick="myCreateFunction()">Create row</button>
    <button onclick="myDeleteFunction()">Delete row</button></td>
  </tr>
</table>

Answer 1

试试这个

function myCreateFunction(thisObj) {

   var buttonTr = thisObj.parentNode.parentNode;
   var buttonTrHTML = buttonTr.outerHTML;
   buttonTr.parentNode.removeChild(buttonTr); 
   var table = document.getElementById("myTable");
   var add = 1;
   for (var i = 0; i < add; i++) 
   {
      table.innerHTML += "<tr><td>ID</td> <td>First Name</td><td>Last Name</td> <td>Add More</td><tr>";   
   }
   //table.innerHTML += buttonTrHTML ;
   table.appendChild(buttonTr );

}

并且您需要将当前的Obj作为

传递

<button onclick="myCreateFunction(this)">Create row</button>

Answer 2

试试这个

＆＃13;

function myCreateFunction() {

  var table = document.getElementById("myTable");
  var rows = table.rows.length;

  var row = table.insertRow(rows);
  
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = "ID";
  cell1.contentEditable = true;

  cell2.innerHTML = "First Name";
  cell2.contentEditable = true;

  cell3.innerHTML = "Last Name";
  cell3.contentEditable = true;
  
  var but1 = document.createElement('button');
  but1.innerHTML = "Create row";
  but1.setAttribute("onclick", "myCreateFunction()");
  cell4.appendChild(but1);

  var but2 = document.createElement('button');
  but2.innerHTML = "Delete row";
  but2.setAttribute("onclick", "myDeleteFunction()");
  cell4.appendChild(but2);
}

＆＃13;

<table id="myTable">
  <tr> 
     <td>ID</td>
     <td>First Name</td>
     <td>Last Name</td>
     <td>Add More</td>
  </tr>
  <tr>
     <td>1</td>
     <td>Jelly</td>
     <td>Beans</td>
     <td><button onclick="myCreateFunction()">Create row</button><button onclick="myDeleteFunction()">Delete row</button></td>
  </tr>
</table>

＆＃13;

Answer 3

我解决了这个问题。它工作正常（也删除行）：

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var maxRows = 10;
if (rowCount < maxRows) {
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
  } else {
    alert("Max. Tabs= " + maxRows);
  }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (chkbox != null && chkbox.checked == true) {
            if (rowCount <= 1) {
                alert("Min Tabs = 1");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

Answer 4

尝试以下功能

function myCreateFunction() {

var table = document.getElementById("myTable");
var rowCount = table.rows.length;
console.log(rowCount)
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = rowCount;
cell2.innerHTML = ""; //put your text/html here
cell2.innerHTML = ""; //put your text/html here
}

将您想要的文字或html放在备受尊重的单元格的innerHTML中

对于Pavel的回答，你的标记是错误的（虽然我没有测试过该功能）。表id'myTable'应该作为字符串传递。

<button onclick="addRow('myTable')">Create row</button>

无法评论没有足够的声誉

希望这有帮助。

将行和列添加到HTML表

4 个答案: