用JavaScript添加行到表格

-1

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

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()" />

来源

2017-05-05 user3753693

您的代码不起作用。请将它放在CodePen中，以便我们可以看到它的工作。然后我们会回答你的问题。 :) –

@GabeRogan它的作品...你只需要把一些内容放入插入的单元格中，让它们出现。 – freginold

这里是你如何能做到这一点。（显然你可以设置文本框的样式，但是你想要的。）你的代码添加了行;我在每个单元格中添加了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。）

来源

2017-05-05 17:46:51 freginold

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

来源

2017-05-05 17:48:37 quirimmo

用JavaScript添加行到表格

回答

相关问题