jQuery在行中查找具有id的元素答案

【问题标题】：jQuery find element with id in rowjQuery在行中查找具有id的元素
【发布时间】：2014-09-27 05:29:38
【问题描述】：

我有一个简单的表格，我正在尝试使用 jQuery 将单元格 .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>

【问题讨论】：

stackoverflow.com/a/50271394/7186739

标签： jquery

【解决方案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 );
});

更好的是，用包含该数据的<form> 和<input type="hidden"> 元素围绕每个按钮，即使没有启用JavaScript，它也可以工作。

【讨论】：

【解决方案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 中的注释。您必须使用

【讨论】：

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

【解决方案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/

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

看看这个 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);
});

【讨论】：

【解决方案6】：

在行中查找具有 id 的元素并使用 jquery 分配给其他元素

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

【讨论】：