Получение значений таблицы в Jquery

Question

У меня есть небольшая форма, которая принимает значения name (TextBox), age (текстовое поле), Education (выберите поле со значениями «Bachelors» и «Masters»).Поэтому у меня есть кнопка с надписью «ДОБАВИТЬ», которая добавляет значения в базу данных и отображает их в виде таблицы.

Я имею таблицу с 10 строками, и каждая строка идентифицируется.Таким образом, у меня есть две кнопки, такие как select и Cancel

. Когда мы говорим, что select значения в таблице должны идти, их значения в соответствующих полях name должны идти в поле name, а в поле Age Value - их поле age и так далее ..

Как мне добиться этого с помощью 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());
    });
 });