1

テーブル行の各セルにドロップダウンリストがあります。ここで必要なのは、追加ボタンを押して、特定のセルにドロップダウンリストを動的に追加することです。これに役立つコードスニペットはありますか？ありがとうございました。以下はコードです。関数addSubRow2を試しましたが、これは非常に静的で、各コンボボックスの横にテキストボックスも必要であり、後で検証してphpページに送信するときに識別できるように、それぞれに一意のIDを指定する方法があるため、先に進むことができません。

<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[1].cells[i].innerHTML;
                newcell.innerHTML = newcell.innerHTML +"<br> TEST";
                //alert(newcell.childNodes[2].type);
                /*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[1].selectedIndex = 0;
                        newcell.childNodes[1].id = "col_" + rowCount+"_2"; 
                            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();
          for(var k=0 ; k<cels.childElementCount ; k++)
          {

            alert("J :"+j+"  "+"K :"+k+"  "+cels.childNodes[k].type);
          }
               }  
            }*/
        }

        function addSubRow2(cell){
            var dropdown = "<SELECT class=\"select\" name=\"country\">\n" +
            "<OPTION value=\"1\">Serial 1<\/OPTION>\n" +
            "<OPTION value=\"2\">Serial 2<\/OPTION>\n" +
            "<OPTION value=\"3\">Serial 3<\/OPTION>\n" + 
            "<OPTION value=\"4\">Serial 4<\/OPTION>" +
            "<OPTION value=\"5\">Serial 5<\/OPTION>" + 
            "<\/SELECT>";
        //var dropdown =  document.getElementById("dataTable").rows[0].cells[2].childNodes[1].cloneNode(true);
        cell.innerHTML += "<br\/ >" + dropdown;
    }


/*alert("COLD ID : "+colID);
            var tdID = document.getElementById(colID);
    var table = document.getElementById(tableID);
    var new_comboBox = table.rows[0].cells[2].childNodes[2].cloneNode(true);


    tdID.appendChild(new_comboBox);*/


        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>
  Begin Location : <select class='select' id="beginLocation" name="beginLocation">
                    <option value="1">Loc 1</option>
                    <option value="2">Loc 2</option>
                    <option value="3">Loc 3</option>
                    <option value="4">Loc 4</option>
                    <option value="5">Loc 5</option>
                </select>
                <p type="text" class=error id='beginLocation_Error'>
    <br\>
    <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>
            <th></th>
            <th>Client</th>
          <th>Location</th>
          <th>Serial</th>
        </tr>

        <tr>
            <td id="col_0_0"><input type="checkbox" name="chk"/></td>
            <td id="col_0_1">
                <select class='select' id="client1" name="client1">
                    <option value="1">Client 1</option>
                    <option value="2">Client 2</option>
                    <option value="3">Client 3</option>
                    <option value="4">Client 4</option>
                    <option value="5">Client 5</option>
                </select><p type="text" class=error id='client_0_Error'>                
            </td>

            <td id="col_0_1">
                <select class='select' id="location1" name="location1">
                  <option value="1">Loc 1</option>
                    <option value="2">Loc 2</option>
                    <option value="3">Loc 3</option>
                    <option value="4">Loc 4</option>
                    <option value="5">Loc 5</option>
                </select>
                <p type="text" class=error id='beginLocation_Error'>                
            </td>

            <td id="col_0_3">
                <input type="button" value="Add Serial" onclick="addSubRow2(this.parentNode);" />
                <br\>
                <select class='select' id="serial_0_1" name="serial_0_1">
                    <option value="1">Serial 1</option>
                    <option value="2">Serial 2</option>
                    <option value="3">Serial 3</option>
                    <option value="4">Serial 4</option>
                    <option value="5">Serial 5</option>
                </select><input type="text" name=txtLoc" id="txtLoc><p type="text" class=error id='serial_0_1_Error'>


            </td>
        </tr>
    </table>

</body>
</html>
4

1 に答える 1

4

これを試してください-デモ

JS

var i = 0;
var option;

document.getElementById("add").addEventListener("click", addSelect, false);

function addSelect() {
    var select = document.createElement("select");
    select.setAttribute("name", "mySelect" + i);
    select.setAttribute("id", "mySelect" + i);

    option = document.createElement("option");
    option.setAttribute("value", "value one");
    option.innerHTML = "ONE";
    select.appendChild(option);

    option = document.createElement("option");
    option.setAttribute("value", "value two");
    option.innerHTML = "TWO";
    select.appendChild(option);

    document.getElementById("wrapper").appendChild(select);

    i++;
}
于 2012-09-18T18:25:57.270 に答える