Question

我们有一个特定的功能，我们需要添加动态行。在第三列的每一行中都有一个按钮来添加组合，它应该能够在该单元格中添加额外的组合。我们尝试过appendChild但是没有用。知道如何添加额外的组合框。以下是代码和功能，即addSubRow。

<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>

Answer 1

我不确定这是否是您真正想要的，但这是一个用于附加组合框的工作函数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。您可以通过移动此参数来简化您的函数addSubRow吗？

希望这有助于交配。

在按钮单击的特定td中添加额外的下拉列表

1 个答案: