Question

我正在尝试使用JavaScript或ASP C＃在用户单击“添加行”按钮时向表格中添加行。我在JavaScript中使用了代码。我想在<td></td>标记内添加带有文本输入框的行。行计数在我的代码中，因为我试图用它来为每个元素添加ID以供以后使用。

element.innerHTML(<input id="tagcell"+(rowcount+1)+"" type="text"/>);

  function addrow() {
     var rowcount = 
     document.getElementById('tbl').getElementsByTagName('tbody').length;
     window.alert(rowcount);
     var tableRef = document.getElementById('tbl').getElementsByTagName('tbody')[0];
     var newRow   = tableRef.insertRow(tableRef.rows.length);

     // Insert a cell in the row at index 0
     var tagcell  = newRow.insertCell(0);
     var desccell = newRow.insertCell(1);
     var loccell  = newRow.insertCell(2);
     var Namecell = newRow.insertCell(3);
     var Sigcell  = newRow.insertCell(4);

     tagcell.innerHTML = "";
     desccell.innerHTML="";
     loccell.innerHTML = "";
     Namecell.innerHTML="";
     Sigcell.innerHTML = "";

  }

   <table id=tbl>
    <tr>
        <td id=tag_no>Col1</td>
        <td id=desc> Col2</td>
        <td id=loc> col3</td>
        <td id=nme> col4</td>
        <td id=sig> col5</td>
    </tr>
</table>
<input type="button" value="clickme" onclick="addrow()" />

Answer 1

以下是你如何做到这一点。（显然你可以根据需要设置文本框的样式。）你的代码添加了行;我刚在每个单元格中添加了textarea。

function addrow() {
     var tableRef = document.getElementById('tbl').getElementsByTagName('tbody')[0];
     var rowcount = tableRef.rows.length;
     window.alert(rowcount);
     var newRow   = tableRef.insertRow(tableRef.rows.length);
     var textBox = "<textarea></textarea>";
     
     // Insert a cell in the row at index 0
     var tagcell  = newRow.insertCell(0);
     var desccell = newRow.insertCell(1);
     var loccell  = newRow.insertCell(2);
     var Namecell = newRow.insertCell(3);
     var Sigcell  = newRow.insertCell(4);

     tagcell.innerHTML = textBox;
     desccell.innerHTML= textBox;
     loccell.innerHTML = textBox;
     Namecell.innerHTML= textBox;
     Sigcell.innerHTML = textBox;

  }

<table id=tbl>
    <tr>
        <td id=tag_no>Col1</td>
        <td id=desc> Col2</td>
        <td id=loc> col3</td>
        <td id=nme> col4</td>
        <td id=sig> col5</td>
    </tr>
</table>
<input type="button" value="clickme" onclick="addrow()" />

编辑：您的行数现在显示正确的数字。（之前每次只显示1。）

Answer 2

function addrow() {
    var myTable = document.querySelector('#tbl');
    var row = myTable .insertRow(0);
    var cell1 = row.insertCell(0);
    cell1.innerHTML = 'My first cell';

    // and so on for other cells
}

P.S。请在所有HTML属性值中添加“”。例如

<table id="tbl">

使用JavaScript向表添加行

2 个答案: