Javascript, чтобы добавить строку в таблицу html

Question

В приведенном ниже коде у меня есть таблица html, в которой мне нужно добавить строку в таблицу html и вставить в базу данных. Но я не смог добавить row.Pls, помог мне исправить проблему. Мой цель заключается в том, чтобы избежать обратной передачи, поэтому я выбираю javascript для добавления строки.

<script language="javascript">   
    function addRow(tableID) { 
    var table = document.getElementById("<%=dataTable.ClientID%>").value; 
    var rowCount = table.rows.length; 
    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; 
     switch (newcell.childNodes[0].type) { 
      case "text": 
       newcell.childNodes[0].value = ""; 
       break; 
      case "checkbox": 
       newcell.childNodes[0].checked = false; 
       break; 
      case "select-one": 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 
     } 
    } 
} 

function deleteRow(tableID) { 
    try { 
     var table = document.getElementById("<%=dataTable.ClientID%>"); 
     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 (null != chkbox && true == chkbox.checked) { 
       if (rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 
     } 
    } catch (e) { 
     alert(e); 
    } 
} 
</script> 



    <input type="button" value="Add Row" onclick="addRow('dataTable')"/> 

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')"/> 

    <table id="dataTable" width="350px" border="1" runat="server"> 
     <tr> 
      <td><input type="checkbox" name="chk" runat="server"/></td> 
      <td><input type="text" name="txt" runat="server"/></td> 
      <td> 
       <asp:DropDownList ID="ddlProduct" runat="server" OnSelectedIndexChanged="ddlProduct_SelectedIndexChanged" AutoPostBack="true" Style="width: 100%; height:23px" ></asp:DropDownList> 
      </td> 
     </tr> 
    </table> 

Answer 1

Тезисы линии проблема:

var table = document.getElementById("<%=dataTable.ClientID%>").value; 
var row = table.insertRow(rowCount); 

Откорректируйте их следующим образом:

var tableBody = document.getElementById("<%=dataTable.ClientID%>").getElementsByTagName("tbody")[0]; 
var row = tableBody .insertRow(rowCount); 

Строки вставляются в tablebody (tbody) и/или tablehead (thead).

var table = document.getElementById("<%=dataTable.ClientID%>").value вернет undefined. Атрибут value используется только на входах для извлечения или установки содержимого ввода.