Получение табличных значений в JQuery

Question

У меня есть небольшая форма, которая принимает значения name (TextBox), возраст (текстовое поле), Образование (выберите поле со значениями «Бакалавры» и «Мастера»). Итак, у меня есть кнопка с «ADD», которая добавляет значения в базу данных и отображает ее в виде таблицы.

Iam, имеющий таблицу с 10 строками и каждой строкой. Таким образом, у меня есть две кнопки, такие как выбор и Отменить

Когда мы говорим, выберите значения в таблице должны идти их соответствующие поля значение имени должно пойти в поле Имя и возраст Значение должно идти от их возраста коробку и так далее ..

Как я могу добиться этого с помощью Jquery

Answer 1

Для 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> 
... 

следующее выражение JQuery будет копировать значения из выбранной строки в форму на «Выбрать» кнопку нажмите:

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