我有一个简单的表,我正在尝试使用jQuery将单元格.name和.date中的文本值发送到表单中.这个脚本工作得很好,但是我不知道如何仅在这一行中查找带有类的文本,例如.name,用户在Book-button上查询.
我的表结构:
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Place</th>
<th>Price</th>
<th>Hours</th>
<th>Book</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><a href="#" title="title1">Camp1</a></td> //send to form this value
<td class="date">10.09 - 15.09.2014 r.</td> //send to form this value
<td>Brighton</td>
<td>555 EURO</td>
<td>20</td>
<td class="book"><button>Book<button></td> //when user click on this button
</tr>
<tr>
<td class="name"><a href="#" title="title1">Camp2</a></td>
<td class="date">02.09 - 22.09.2014 r.</td>
<td>Brighton</td>
<td>432 EURO</td>
<td>20</td>
<td class="book"><button>Book<button></td>
</tr>
<tr>
<td class="name"><a href="#" title="title1">Camp3</a></td>
<td class="date">23.09 - 27.09.2014 r.</td>
<td>Brighton</td>
<td>123 EURO</td>
<td>20</td>
<td class="book"><button>Book<button></td>
</tr>
</tbody></table>
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud)
我的剧本:
<script>
$( "button" ).click(function() {
var text = $( '.name' ).text();
$( "#name" ).val( text );
var text = $( '.date' ).text();
$( "#date" ).val( text );
});
</script>
Run Code Online (Sandbox Code Playgroud)
我的表格:
<fieldset id="contact_form" style="display:none;">
<div id="result"></div>
<label for="name"><span>Name</span>
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
<label for="email"><span>Email Address</span>
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
<label><span> </span>
<button class="submit_btn" id="submit_btn">Submit</button>
</label>
</fieldset>
<button c
lass="submit_btn" id="submit_btn">Submit</button>
</label>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
Bla*_*ger 11
http://api.jquery.com/category/traversing/tree-traversal/
$( "button" ).click(function() {
var text = $(this).closest('tr').find('.name').text();
$( "#name" ).val( text );
text = $(this).closest('tr').find('.date').text();
$( "#date" ).val( text );
});
Run Code Online (Sandbox Code Playgroud)
更好的是,<form>使用<input type="hidden">包含该数据的元素围绕每个按钮,即使没有启用JavaScript也可以使用它.