如何通過在javascript中動態分割列來添加行

此代碼的問題在於，當我們要添加一行時，它只會在一列中添加一行。請有人可以告訴我如何拆分列？如何通過在javascript中動態分割列來添加行

的JavaScript：

function Myfunction(tableid) { 
     var table=document.getElementById("tablerow");    
     var rowCount = table.rows.length;    
     var row = table.insertRow(rowCount);    
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(0); 

     cell2.innerHTML = rowCount + 1; 

     var cell3 = row.insertCell(1); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     cell3.appendChild(element2); 
    }

HTML：

<body> 
     <table id="tablerow" border="1" align="center"> 
      <tr> 
      <td><center>1</center></td> 
      <td><input type="textbox" name="" value=""></td> 
      <td><input type="textbox" name="" value=""></td> 
      <td><input type="textbox" name="" value=""></td> 
     </tr> 
     <tr> 
      <td><center>2</center></td> 
      <td><input type="textbox" name="" value=""></td> 
      <td><input type="textbox" name="" value=""></td> 
      <td><input type="textbox" name="" value=""></td> 
     </tr> 

     <center><input type="button" value="Add Row" onclick="Myfunction()">

來源

2012-11-19 noorul hassan

你既沒有關閉'table'-tag也沒有關閉'body'。不會解決問題，但無論如何.. – nozzleman

你必須在表四列，但你想，只有三個單元格中插入一行。這導致無效的表結構。

此外，你應該通過調用insertCell()方法時給予正確的索引，把每個細胞在適當位置。

這裏工作的是插入一行四個單元代碼，先有「運行指數」，其餘有文本框，每個和自己的文本框：

function Myfunction(tableid) { 
    var table=document.getElementById("tablerow");   
    var rowCount = table.rows.length;   
    var row = table.insertRow(rowCount);   

    var cell1 = row.insertCell(0); 
    cell1.innerHTML = rowCount + 1; 

    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    cell2.appendChild(element2); 

    var cell3 = row.insertCell(2); 
    var element3 = document.createElement("input"); 
    cell3.appendChild(element3); 

    var cell4 = row.insertCell(3); 
    var element4 = document.createElement("input"); 
    cell4.appendChild(element4); 
}

Live test case。

這工作，但很「笨拙」。有它更加靈活，更加書面，添加其他功能：

function CellWithTextbox(row, index) { 
    var cell = row.insertCell(index); 
    var element = document.createElement("input"); 
    element.type = "text"; 
    cell.appendChild(element); 
    return cell; 
}

然後你的函數的最後一部分將轉向那些簡單的線條：

var cell2 = CellWithTextbox(row, 1); 
var cell3 = CellWithTextbox(row, 2); 
var cell4 = CellWithTextbox(row, 3);

Updated fiddle。

來源

2012-11-19 10:04:39

如何通過在javascript中動態分割列來添加行

回答

相關問題