JavaScriptを使用してテーブルに行を追加する

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

EDIT：あなたの行数が正しい数を示しています。 （毎回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">