5 Replies - 3313 Views - Last Post: 19 September 2012 - 10:32 AM

#1 frwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 14-September 12

Adding dropdown list on a cell

Posted 18 September 2012 - 11:10 AM

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.
Is This A Good Question/Topic? 0
  • +

Replies To: Adding dropdown list on a cell

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: Adding dropdown list on a cell

Posted 18 September 2012 - 12:34 PM

View Postfrwa, on 18 September 2012 - 12:10 PM, said:

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.

I'm a bit confused as to what it is that you are trying to do.
:helpsmilie:
How many rows or columns are you planning for your table size?
Do you have a brief example of the table setup you want?
What do the initial drop-down options contain?
Are the second drop-downs dependent upon selections in the first drop-down?
What do the second drop-down options look like?
Was This Post Helpful? 0
  • +
  • -

#3 Nullified  Icon User is offline

  • New D.I.C Head

Reputation: 13
  • View blog
  • Posts: 49
  • Joined: 18-September 12

Re: Adding dropdown list on a cell

Posted 18 September 2012 - 02:16 PM

Yes, please try posting your current code and what you intend to achieve. It seems you want to append select options based on another dropdown's selected item. Is this true? This can be achieved with javascript/ajax technology.
Was This Post Helpful? 0
  • +
  • -

#4 frwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 14-September 12

Re: Adding dropdown list on a cell

Posted 18 September 2012 - 07:08 PM

Dear Nulliefied & Jmrker,
I have already have the codes and call the function addSubRows. There are few issues I know how to add the combo but that is the static one I would just like to copy and add. NExt thing is that in every td would like to have a table and in the table I would like to add add one combo box, input text and remove button and below row should be for the error message. So how to change their id dynamically and also the sub tables too. Below is my codes.

<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;
				
		}
		
		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>";
       
       
      
        cell.innerHTML += "<br\/ >" + dropdown;
    }


		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\>
				<table id="sub0">
					<tr>
						<td>
							<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>
					   </td>
					   <td>
					   	 <input type="text" id="txt_0_1" name="txt_0_1">					   	
					   </td>
					   <td>
					   	 <input type="button" value="Remove" onclick="removeSubRow2(this.parentNode);" />					   	
					   </td>
				  </tr>
				  <tr>
				  	 <td>
				  	 <p  class=error id="selecterror_0_1">
				  	</td>
				  	 <td>
				  	 <p class=error id="inputerror_0_1">
				  	</td>	
				  	<td>
				  	 
				  	</td>
				  </tr>
				</table>
				
			</td>
		</tr>
	</table>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 Nullified  Icon User is offline

  • New D.I.C Head

Reputation: 13
  • View blog
  • Posts: 49
  • Joined: 18-September 12

Re: Adding dropdown list on a cell

Posted 19 September 2012 - 06:30 AM

Honestly, I'm not sure about everything you are asking. It seems like you are asking alot to change at the same time. Maybe we can start with one problem at a time.
Was This Post Helpful? 0
  • +
  • -

#6 frwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 14-September 12

Re: Adding dropdown list on a cell

Posted 19 September 2012 - 10:32 AM

Dear Nullified,
Ok to ease your understanding on my own now I could do the following ready.So if you notice each time I add a new row I can change the id of the select of 2nd and 3rd column ready. Now I am stuck for 4th column I want to change for the button the id and also the sub table. I try looping for the childNodes but the id for sub table does not come out? Maybe you can help me check my codes below?


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;
				
				
		  }
		  
		  var rows = table.querySelectorAll('[id^=row]');
		  for (var i = 0, row; row = table.rows[i]; i++) {
				  row.id="row"+i;
				  row.name="row"+i;
				  var rowName = "row"+i;
				  for (var j = 0, col; col = row.cells[j]; j++) {
				  	 col.id="col_"+i+"_"+j;
				     col.name="col_"+i+"_"+j;
				     
				     if(j==1 && i>0)
				     {
				       //alert("TEST : "+col.childNodes[0].getElementsByTagName('select')[j]);
				       col.childNodes[0].id = "client"+i;
				       col.childNodes[0].name = "client"+i;
				       col.childNodes[2].id = "client_"+i+"_Error";
				     }
				     if(j==2 && i>0)
				     {
				       //alert("TEST : "+col.childNodes[0].getElementsByTagName('select')[j]);
				       col.childNodes[0].id = "location"+i;
				       col.childNodes[0].name = "location"+i;
				       col.childNodes[2].id = "location_"+i+"_Error";
				     }
				     if(j==3)
				     {
				     	alert("CELS : "+col.childNodes.length);
				     	
				     	//var d = document.getElementById("ID_of_parent");
              //if (d)
              //{
				        for(var c = 0; c < col.childNodes.length; c++)
				        {
				            alert("C : "+c+"   "+col.childNodes[c].nodeType+"   "+"ID IS :"+col.childNodes[c].name );
				            
				            //if (col.childNodes[c].nodeType == 1)
				            //    alert(typeof(col.childNodes[c]) + "- " + col.childNodes[c].nodeType + ": " + col.childNodes[c].tagName + " - " + col.childNodes[c].innerHTML);
				        }
              //}
				     	
				     	
				     	
				     	/*for(var c = 0; c < col.childElementCount; c++)
              {
               alert("ID : "+col.item(c).id);
              }*/
				     	//alert(col.childNodes[0].getElementsByTagName('button')[0]);
				     	
				     }
		      }
		  }
		  /*for(var i=0; i<colCount; i++) {
		  	
		  	newcell.childNodes[0].getElementsByTagName('select')[0];
		  	
		  }*/
		
		var iRowCount = table.getElementsByTagName('tr').length;
      alert('Your table has ' + iRowCount + ' rows.');
	 }


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1