Solved

Dynamically Adding Rows with a Populated Combobox

Posted on 2004-09-07
4
352 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write 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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now