0

動的行を追加する必要がある特定の機能があります。3 列目の各行には、コンボを追加するためのボタンがあり、そのセルに追加のコンボを追加できるはずです。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>
4

1 に答える 1

0

これが本当に欲しいものかどうかはわかりませんが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この引数を削除して関数を単純化できますか?

これが仲間に役立つことを願っています。

于 2012-09-16T11:33:54.390 に答える