插入新行（行跨度）使用Javascript

我的Javascript類似如下：插入新行（行跨度）使用Javascript

function addRow(table1) { 

      var table = document.getElementById(table1); 

      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; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 
       } 
      } 
     }

與HTML類似如下：

<input type="button" value="Insert row" onclick="addRow('table1')" /> 
<table id="table1" border=1> 
    <tr> 
     <td rowspan=2><input type="text" name="txt1"></td> 
     <td><input type="text" name="txt2"></td> 
    </tr> 
    <tr> 
     <td><input type="text" name="txt3"></td> 
    </tr> 
</table>

我有一排rowspan=2，兩行沒有行跨度。如何編寫以下行，以便在用戶單擊「插入行」按鈕後，將三個文本框添加到新行中？

newcell.innerHTML = table.rows[0].cells.innerHTML;

來源

2013-01-21 Lorek Bryanson

@JosephSilber看到，因爲這件是新的，我想應該是的代碼是如何粘貼到問題的問題 - 它可以得到亂碼有時。因此，我不認爲需要這麼聰明的評論，特別是當他只是想獲得幫助時。 –

@AustinBrunkhorst - OP在他的腰帶下有2個答案和5個問題。是時候畢業了。 –

不管情況如何，做一個自作聰明都不會有助於提高生產力。 –

注意，在你的代碼中有：

> newcell.innerHTML = table.rows[0].cells.innerHTML;

我想你的意思：

newcell.innerHTML = table.rows[0].cells[i].innerHTML;

但無論如何，你認爲用克隆行呢？例如類似如下（未經測試）：

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var row = table.rows[0].cloneNode(true); 
    var inputs = row.getElementsByTagName('input'); 
    var i = inputs.length; 

    while (i--) { 

    if (inputs[i].type = 'text') { 
     inputs[i].vaule = ''; 

     // Might want to change other properties too 
    } 
    } 
    table.tBodies[0].appendChild(row); 
}

來源

2013-01-21 02:33:33 RobG

感謝您的領導，從來沒有想過'cloneNode（）'。但它只會克隆第一行。 –

@ LorekBryanson - 您可以克隆任何您想要的節點（及其後代），我只是使用第一行，因爲這就是您放入OP中的內容。 – RobG

插入新行（行跨度）使用Javascript

回答

相關問題