Getting table values ​​in jQuery

Question

I have a small form that takes the values ​​name (TextBox), age (text field), Education (select the field with the values ​​"Bachelors" and "Wizards"). Therefore, I have a button with "ADD" that adds values ​​to the database and displays it in a table.

A yam having a table with 10 rows and each row. So I have two buttons like select and Cancel

When we say that select the values ​​in the table, we should put their corresponding field name values, which should be indicated in the name field, and the age value should correspond to their age, etc.

How can I achieve this with jQuery

Answer 1

For this HTML:

... <div> <label for="NameTextBox">Name:</label> <input type="text" id="NameTextBox" /> </div> <div> <label for="AgeTextBox">Age:</label> <input type="text" id="AgeTextBox" /> </div> <div> <label for="EducationSelect">Education:</label> <select id="EducationSelect"> <option value="Bachelors">Bachelors</option> <option value="Masters">Masters</option> </select> </div> <input type="button" value="Add" /> <table> <tr> <th></th> <th>Name</th> <th>Age</th> <th>Education</th> </tr> <tr> <td><input type="button" id="row1" value="Select" /></td> <td>Name1</td> <td>44</td> <td>Bachelors</td> </tr> <tr> <td><input type="button" id="row2" value="Select" /></td> <td>Name2</td> <td>32</td> <td>Masters</td> </tr> </table> ... 

The following jQuery expression will copy the values ​​from the selected row into the form on the Select button:

 $(function() { $("table input").click(function(event) { $("#NameTextBox").val($("tr").has("#" + event.target.id).find("td:nth-child(2)").html()); $("#AgeTextBox").val($("tr").has("#" + event.target.id).find("td:nth-child(3)").html()); $("#EducationSelect").val($("tr").has("#" + event.target.id).find("td:nth-child(4)").html()); }); });