使用jQuery在行中查找具有特定id的元素

Question

我有一个简单的表格，我想使用jQuery将.cells .name和.date中的文本值发送到表单中。这个脚本运行得很好，但我不知道如何仅在用户点击Book按钮的那一行中查找具有类名（例如.name）的文本。

我的表格结构：

      <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> 

我的脚本:

<script>
$( "button" ).click(function() {
var text = $( '.name' ).text();
$( "#name" ).val( text );
var text = $( '.date' ).text();
$( "#date" ).val( text );
});
</script>

我的表单：

<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>&nbsp;</span>
        <button class="submit_btn" id="submit_btn">Submit</button>
        </label>
    </fieldset>
        <button c

lass="submit_btn" id="submit_btn">Submit</button>
    </label>
</fieldset>

- pobliska

---

https://dev59.com/MGYq5IYBdhLWcg3weAej#50271394 - Billu

Answer 1

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

更好的做法是，使用一个包含数据的<input type="hidden">元素的<form>来包裹每个按钮。即使没有启用JavaScript，这种方式也能正常工作。

- Blazemonger

Answer 2

问题出在你的JavaScript代码中。你需要只针对用户点击的对象进行操作。可以通过在点击回调函数中使用this关键字来实现。

$( ".book button" ).click(function() {
    var tr = $( this ).parents('tr');
    $( "#name" ).val( tr.find('.name').text() );
    $( "#date" ).val( tr.find('.date').text() );
});

其他注意事项：

• 变量只能使用一次 var 进行声明，之后可以直接使用该变量而无需再加上var。
• // 不能用于HTML中的注释。必须使用 <!-- 和 -->

- Pluto

---

如果使用嵌套表，.parents 将返回多个表行。.closest 是更好的选择。 - Blazemonger

Answer 3

$("button").click(function() {
var text1 = $(this).closest('tr').find('.name').text();
alert(text);
$("#name").val( text1 );
var text2 = $(this).closest('tr').find('.date').text();
$("#date").val( text2 );
});

演示：

http://jsfiddle.net/u68wJ/

- RGS

Answer 4

使用jQuery查找行中具有ID的元素并分配给其他元素

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});

- Billu

Answer 5

这应该可以工作。
$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});

- Xriuk

Answer 6

看看这个jsfiddle http://jsfiddle.net/Dz24f/

基本上，当您单击按钮时，需要获取其父元素（即行），然后使用给定的jquery选择器获取该行的同级元素。

$("button").click(function () {
    var _this = $(this);
    var text = _this.parent().siblings('.name').text();
    console.debug(text);
    $("#name").val(text);
    var date = _this.parent().siblings('.date').text();
    console.debug(date);
    $("#date").val(date);
});

- Patrick Grimard