Adding dropdown list on a cell

Question

newbie14 0 Posting Pro

11 Years Ago

I have a dropdown list on each cell of table row. Now what I need is dynamically add more dropdownlist on a particular cells with pressing the add button. Any code snippet to help on this? Thank you.

javascript

2 Contributors
8 Replies
7K Views
3 Days Discussion Span
Latest Post 11 Years Ago Latest Post by newbie14

All 8 Replies

theHop 18 Newbie Poster

11 Years Ago

Do you mean something like this?

var target_cell = document.getElementById("cell_id");
var list = "<select>" +
           "<option value=\"value1\">Val 1<\/option>" +
           "<option value=\"value2\">Val 2<\/option>" +
           "<\/select>";

target_cell.innerHTML = list;

theHop 18 Newbie Poster

11 Years Ago

Ok. I've written a new addSubRow function

function addSubRow2(cell){

        var dropdown = "<SELECT class=\"select\" name=\"country\">\n" +
                "<OPTION value=\"in\">India<\/OPTION>\n" +
                "<OPTION value=\"de\">Germany<\/OPTION>\n" +
                "<OPTION value=\"fr\">France<\/OPTION>\n" + 
                "<OPTION value=\"us\">United States<\/OPTION>" +
                "<OPTION value=\"ch\">Switzerland<\/OPTION>" + 
                "<\/SELECT>";

        cell.innerHTML += "<br\/ >" + dropdown;
    }

the onclick attribute for the button needs to be:

<INPUT type="button" value="Add Combo" onclick="addSubRow2(this.parentNode);" />

so this adds a new combo to the cell. I haven't accounted for the P tag after that looks like it holds a error. I didn't know if it was supposed to have one of them for every combo or not. I've also removed the ID attribute of the dropdown as I noticed that every time you add a row it gives the dropdown exactly the same ID. You could find the cell in the DOM and loop through the combos for the values.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

newbie14 0 Posting Pro · Answer 1 · 2012-09-17T15:19:52+00:00

Yes I want it to be in the particular cells. Below is my codes which I have tried. If you see I can add the rows dynamically without any problem. The problem now if I press the Add Combo button I need to duplicate the first combo box and just add below the previous one how is that possible? I am stuck here.

<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[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 addSubRow(tableID,colID) {

            var tdID = document.getElementById(colID);
    var table = document.getElementById(tableID);
    var new_comboBox = table.rows[0].cells[2].childNodes[1].innerHTML;

    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>

    <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 class='select' id="cold_0_2" 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><p type="text" class=error id='countryID_0_2_Error'>


            </TD>
        </TR>
    </TABLE>

</BODY>
</HTML>

newbie14 0 Posting Pro · Answer 2 · 2012-09-17T17:40:38+00:00

Ok let me explain in details. What I need is that for the Add Row to add rows which is working fine. Then Add Combo will add duplicate combo in the cell. The issue if I use your method I will have a problem because this combo will get value from a database and not this one which is just a sample. In addition yes I need the p because finally when I submit the form for php process I must check each combo in the cell is selected. How can that this be achieve I have been trying many methods all not working too? Thank you.

newbie14 0 Posting Pro · Answer 3 · 2012-09-17T17:48:50+00:00

I think we need to give each of the cell combo also a new unique id and also the p an id because when I do a check then I can easily put an error message rite or do you have any other idea ?

theHop 18 Newbie Poster · Answer 4 · 2012-09-17T20:20:31+00:00

So when you say the combe will be get it's values from a database. Are you pulling the values using ajax?

if thats the case then let the php script generate the dropdown then pull it in the responseText.

when checking this many form fields I don't fully see how an ID will help. you are probably going to be best to loop through each row. break it down into smaller functions. this will make it easier to write.

I'll come back with some functions in a bit. Family life is calling :S

newbie14 0 Posting Pro · Answer 5 · 2012-09-18T01:57:26+00:00

Below is how I anticipate my final work should be let me explain step by step.
1.Choose begin location value and it can never be same with any of the location combo in the table below.
2.In each row once the Client combo is selected I would like to update via ajax the location list based on the Client selected value here is where I am also lost too.
3.Lastly the the Serial column the user can click Add Serial to add more serial and beside each combo is a text box to field some value. Can I also have a remove button to dynamically remove the added serial?
4.Finally each of the field in the table must be either selected(index >0) or field with some value before I could submit to the php page for insertion into db.
5.How must I add the id so that the php page could read it accordingly? Thank you.

Hopefully I made clear the problem I am facing.

<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=\"in\">India<\/OPTION>\n" +
                "<OPTION value=\"de\">Germany<\/OPTION>\n" +
                "<OPTION value=\"fr\">France<\/OPTION>\n" + 
                "<OPTION value=\"us\">United States<\/OPTION>" +
                "<OPTION value=\"ch\">Switzerland<\/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>

newbie14 0 Posting Pro · Answer 6 · 2012-09-18T18:27:27+00:00

@hop any more extra information you need from my side to clear the scenario? Thank you.

Adding dropdown list on a cell

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers