獲取表格值Jquery

Question

我有一個小型窗體，它採用值的名稱（文本框），年齡（文本框），教育（選擇框值「單身漢」和「大師」）。 所以我有一個按鈕「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()); 
    }); 
});