2010-07-24 78 views
4

我有一个小型窗体,它采用值的名称(文本框),年龄(文本框),教育(选择框值“单身汉”和“大师”)。 所以我有一个按钮“ADD”,它将值添加到数据库并以表格格式显示它。获取表格值Jquery

Iam具有10行,每行的表被标识。所以,我有两个按钮,如选择和取消

当我们说选择在表中的值应该去他们各自的盒子名称值应该去名框和时代价值应该去他们的年龄箱等..

我怎样才能达致这使用jQuery

+1

什么意思是“去他们各自的盒子?”你想将值添加到数据库吗?或者您是否想要将表单的值复制到页面上的动态表格中? – Marko 2010-07-24 22:36:44

回答

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