Solved

Dynamically Adding Rows with a Populated Combobox

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Syntax 2 47
CSS Position not returning 2 48
JavaScript and Regular Expressions - How to implement date validation? 7 32
Change javascript css 1 20
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

920 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

13 Experts available now in Live!

Get 1:1 Help Now