在 Jquery 中获取表值

Question

我有一个小表单，其中包含值 name (TextBox)、age(textbox) 、 Education（选择带有值“Bachelors”和“Masters”的框）。 所以我有一个带有“ADD”的按钮，它将值添加到数据库并以表格格式显示。

我的表有 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());
    });
 });