CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Bara
Bara

Reputation: 1113

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

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.

Upvotes: 2

Views: 5003

Answers (2)

mck89
mck89

Reputation: 19251

$("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);
})

Upvotes: 4

John Fisher
John Fisher

Reputation: 22717

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: How to add a new row to a specified table with jQuery?

Upvotes: 0

Related Questions