Solved

Dynamically Adding Rows with a Populated Combobox

Posted on 2004-09-07
4
371 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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 …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

733 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