How to add a row below the currently selected row (based on a dropdown input) using jQuery?

Question

I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.

Is any of this possible using only jQuery?

Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.

Bara

Answer 1

It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.

To learn how to add a row, look at the suggestions here: http://stackoverflow.com/questions/1338958/how-to-add-a-new-row-to-a-specified-table-with-jquery

Answer 2

$("table select").live("click",function(){
 var row=$(this).parent().parent();//add some .parent() untill you get the TR element
 var val=$(this).val(); //<select> value if you want to use it for some conditions
 $("<tr><td>....</td></tr>").insertAfter(row);
})