Solved

Dynamically Adding Rows with a Populated Combobox

Posted on 2004-09-07
4
363 Views
Last Modified: 2006-11-17
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
0
Comment
Question by:mdoza
  • 2
  • 2
4 Comments
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12003593
<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
 

Author Comment

by:mdoza
ID: 12003659
@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
 
LVL 8

Accepted Solution

by:
RozanaZ earned 200 total points
ID: 12003735
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
 

Author Comment

by:mdoza
ID: 12003778
wow, I finally get it!

thanks man, I really appreciate it.
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question