用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添加行到表格

回答

相關問題