在特定的td上添加額外的下拉列表按鈕點擊

我們有一個特定的功能，我們需要添加動態行。在第三列的每一行中都有一個按鈕來添加組合，它應該能夠在該單元格中添加額外的組合。我們嘗試過appendChild，但沒有工作。任何想法如何添加額外的組合框。下面是做addSubRow的代碼和函數。在特定的td上添加額外的下拉列表按鈕點擊

<HTML> 
<HEAD> 
    <SCRIPT language="javascript"> 
     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      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; 
       newcell.innerHTML = newcell.innerHTML +"<br> TEST"; 
       //alert(newcell.childNodes); 
       /*switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          newcell.childNodes[0].id = "input" + rowCount; 
          break; 
        case "checkbox": 
          newcell.childNodes[0].checked = false; 
          newcell.childNodes[0].id = "checkbox" + rowCount;  
          break; 
        case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         newcell.childNodes[0].id = "select" + rowCount; 
          break; 
       }* 
       if(newcell.childNodes[0].type=="button") 
       { 
        alert("TEST"); 
        newcell.childNodes[0].id=rowCount; 
       }*/ 
      } 

      var table = document.getElementById(tableID); 
      var rows = table.getElementsByTagName('tr'); 
      for (var i = 0, row; row = table.rows[i]; i++) { 
        row.id="row"+i; 
        row.name="row"+i; 
        var rowName = "row"+i; 
       //iterate through rows 
       //rows would be accessed using the "row" variable assigned in the for loop 
       for (var j = 0, col; col = row.cells[j]; j++) { 
       //iterate through columns 
       //columns would be accessed using the "col" variable assigned in the for loop 
       col.id="col_"+i+"_"+j; 
        col.name="col_"+i+"_"+j; 
       var cels = rows[i].getElementsByTagName('td')[j]; 
       var realKids = 0,count = 0; 
       kids = cels.childNodes.length; 
       while(count < kids){ 
         if(cels.childNodes[i].nodeType != 3){ 
          realKids++; 
         } 
         count++; 
        } 
        alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount); 
       //alert(); 

       } 
      } 
     } 

     function addSubRow(tableID,colID) { 

      var tdID = document.getElementById(colID); 



      var table = document.getElementById(tableID); 

      var comboBox1 = table.rows[0].cells[2].childNodes[1]; 
      comboBox1 = comboBox1; 

     tdID.appendChild(comboBox1); 
     //tdID.appendChild(comboBox1); 
     //tdID.appendChild(comboBox1); 
     } 

     function deleteRow(tableID) { 
      try { 
      var table = document.getElementById(tableID); 
      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--; 
       } 


      } 
      var table = document.getElementById(tableID); 
      for (var i = 0, row; row = table.rows[i]; i++) { 
        row.id="row"+i; 
       //iterate through rows 
       //rows would be accessed using the "row" variable assigned in the for loop 
       for (var j = 0, col; col = row.cells[j]; j++) { 
       //iterate through columns 
       //columns would be accessed using the "col" variable assigned in the for loop 
       //alert("J : "+j); 
       col.id="col"+i; 
       if(j==0) 
       { 

       } 
       else if(j==1) 
       { 

       } 
       } 
      } 

      }catch(e) { 
       alert(e); 
      } 
     } 

    </SCRIPT> 
</HEAD> 
<BODY> 

    <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"> 
     <TR> 
      <TD><INPUT type="checkbox" name="chk"/></TD> 
      <TD><INPUT type="text" name="txt"/></TD> 
      <TD id="col_0_2"> 
       <INPUT type="button" value="Add Combo" onclick="addSubRow('dataTable','col_0_2')" /> 
       <SELECT name="country"> 
        <OPTION value="in">India</OPTION> 
        <OPTION value="de">Germany</OPTION> 
        <OPTION value="fr">France</OPTION> 
        <OPTION value="us">United States</OPTION> 
        <OPTION value="ch">Switzerland</OPTION> 
       </SELECT> 
      </TD> 
     </TR> 
    </TABLE> 

</BODY> 
</HTML>

來源

2012-09-16 user132638

我不知道這是否是你真正想要的，但這裏的，用於附加組合框工作功能addSubRow功能。

我加了一些註釋來解釋我做了什麼：

function addSubRow(tableID,colID) { 
    var tdID = document.getElementById(colID); 
    var table = document.getElementById(tableID); 

    // Create a new combobox element 
    var new_comboBox = document.createElement('select'); 

    // Define/Add new combobox's attributes here 
    //new_comboBox.setAttribute('id', 'something'); 
    // ... 
    // ... 

    // Add new combobox's options - you may use a 'for' loop... 
    var option_1 = document.createElement('option'); 
    option_1.setAttribute('value', '1'); 
    var txt_1 = document.createTextNode("OPTION 1"); 
    option_1.appendChild(txt_1); 

    var option_2 = document.createElement('option'); 
    option_2.setAttribute('value', '2'); 
    var txt_2 = document.createTextNode("OPTION 2"); 
    option_2.appendChild(txt_2); 

    var option_3 = document.createElement('option'); 
    option_3.setAttribute('value', '3'); 
    var txt_3 = document.createTextNode("OPTION 3"); 
    option_3.appendChild(txt_3); 
    // ... 
    // ... 

    // Appending options to the new combobox 
    new_comboBox.appendChild(option_1); 
    new_comboBox.appendChild(option_2); 
    new_comboBox.appendChild(option_3); 
    // ... 
    // ... 

    // Appending the combobox to the TD 
    tdID.appendChild(new_comboBox); 
}

PS：定義組合框的屬性和它的選項時，

注重屬性
我不要以爲你需要在你的功能中使用表格ID tableID。你可以通過rmoving這個參數來簡化你的功能addSubRow？

希望這有助於隊友。

來源

2012-09-16 11:33:54 Littm

我需要的是首先能夠動態地添加行，我可以做好準備。我的下一部分是在單元本身，我應該能夠添加更多的下拉列表，我可以複製第一個原始列表，因爲列表應該是同一個列表。我需要你幫助動態地添加和刪除單元格中的下拉列表嗎？我現在更清楚了嗎？ – user132638

我想這個，但沒有發生var new_comboBox = table.rows [0] .cells [2] .childNodes [1] .innerHTML; tdID.appendChild（new_comboBox）; – user132638

我已經運行一個循環來查找列中的所有元素類型，我驚訝地顯示[0] undefined和[1]按鈕和[2]也未定義？任何原因爲[0]不是按鈕？ – user132638

在特定的td上添加額外的下拉列表按鈕點擊

回答

相關問題