Dynamically Adding Rows with a Populated Combobox

greets to all experts!

Hi, how can i dynamically add a row with a populated (option values) combobox in it? And how can I add a row with a pre-determined class,colspan,width,alignment, etc.?


thanks in advance
mdozaAsked:
Who is Participating?
 
RozanaZConnect With a Mentor Commented:
Hi,
In this example you may see selecction, image and link added to new row,
and function to delete row in table according to row index:

<HTML>
<HEAD>
<TITLE></TITLE>

<style>
.selectStyle
{
      color: red;
      background-color: pink;
}
</style>
<script>
function update()
{

     //get table
     var tableObj = document.getElementById("myTable");    
     var tableOldSize = tableObj.rows.length;
     //add row at the end of the table
     var rowObj = tableObj.insertRow(tableOldSize);
     var cell_1 = rowObj.insertCell(0);    
     cell_1.innerHTML="<select id='select1' name='select1' class='selectStyle'><option id='option1' name='option1' value='Option 1'>Option 1</option><option id='option2' name='option2' value='Option 2'>Option 2</option></select>"

     var cell_2 = rowObj.insertCell(1);    
     cell_2.innerHTML="<img src='http://www.experts-exchange.com/images/certification.gif'>"

       var cell_3 = rowObj.insertCell(2);    
     cell_3.innerHTML="<a href='http://www.experts-exchange.com'>Link</a>";

     //add colspan to previous rows
     for (i = 0; i < tableOldSize; i++)
     {
          tableObj.rows[i].cells[0].colSpan="3";
     }
     
}


function deleteRows(rowIndex)
{
      var tableObj = document.getElementById("myTable");  
      tableObj.deleteRow(rowIndex);
}
</script>
</HEAD>
<BODY>
<table name="myTable" id="myTable" border="1">
     <tr>
          <td>row 1</td>
     </tr>
     <tr>
          <td>row 2</td>
     </tr>
</table>
<br>
<input type="button" value="Add rows" onCLick="javascript: update()"><br>
<input type="button" value="Delete rows" onClick="deleteRows(0)">
</BODY>
</HTML>
0
 
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
function update()
{

      //get table
      var tableObj = document.getElementById("myTable");      
      var tableOldSize = tableObj.rows.length;
      //add row at the end of the table
      var rowObj = tableObj.insertRow(tableOldSize);
      var cell_1 = rowObj.insertCell(0);      
      cell_1.innerHTML="<select id='select1' name='select1'><option id='option1' name='option1' value='Option 1'>Option 1</option><option id='option2' name='option2' value='Option 2'>Option 2</option></select>"

      var cell_2 = rowObj.insertCell(1);      
      cell_2.innerHTML="<select id='select1' name='select1'><option id='option1' name='option1' value='Option 1'>Option 1</option><option id='option2' name='option2' value='Option 2'>Option 2</option></select>"

      //add colspan to previous rows
      for (i = 0; i < tableOldSize; i++)
      {
            tableObj.rows[i].cells[0].colSpan="2";
      }
      
}
</script>
</HEAD>
<BODY>
<table name="myTable" id="myTable" border="1">
      <tr>
            <td>row 1</td>
      </tr>
      <tr>
            <td>row 2</td>
      </tr>
</table>
<br>
<input type="button" value="Button" onCLick="javascript: update()">
</BODY>
</HTML>
0
 
mdozaAuthor Commented:
@RozanaZ:

thanks for the reply, I have a couple of quetions, though,
is it possible that a can place a class(or stylesheet on the combobox?
and how can I add row with an image(with 'a href') on it?
and can you also provide deleting the rows?

im really sorry, Im quite new to javascripting. I can increase the points if you want to.
0
 
mdozaAuthor Commented:
wow, I finally get it!

thanks man, I really appreciate it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.