如何提取一个值 <td> 当你只知道 <tr>

Question

我有以下HTML，它是通过jQuery插件为我动态生成的：

<tr class="even selected" role="row" id="row_231">
<td>231</td>
<td class="sorting_1">John Doe</td>
<td>23819</td>
<td>test@yahoo.com</td>
</tr>

我唯一拥有的信息是<TR>上的ID。 这是我拥有的jQuery代码，除其他外，它捕获了用户选择的tr：

var selected = [];

$('#users tbody').on('click', 'tr', function () {
    var id = this.id;
    var index = $.inArray(id, selected);
    if ( index === -1 ) {
        selected.push( id );
    } else {
        selected.splice( index, 1 );
    }

    $(this).toggleClass('selected');
} );

此逻辑效果很好-突出显示并跟踪已选择的内容。 现在，我需要做的是在同一页上的div内显示选定的每一行的第二列和第四列的内容。 因此，使用上面的示例HTML，我想显示如下内容：

  John Doe - test@yahoo.com

Answer 1

如果位置始终是2和4，则可以使用eq（i），例如：

$(this).find('td:eq(1)').text() //John Doe
$(this).find('td:eq(3)').text() //test@yahoo.com

Answer 2

如果此值总是在第2 td第4天出现，则可以使用以下代码：

var name = $(this).find("td:eq(1)").text();
var email = $(this).find("td:eq(3)").text();

结果相同的替代解决方案：

var name = $("td:nth-child(2)", this).text();
var email = $("td:nth-child(4)", this).text();

参考文献

：eq（）选择器

：nth-​​child（）选择器

Answer 3

这个简单的示例将向您展示如何做到这一点：

 $().ready(function(){ $('#Div1').html($('#TR1 :nth-child(1)').html() + ' ' + $('#TR1 :nth-child(3)').html() ) }) 

 #Div1 { border: solid 1px #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr id='TR1'> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> <div id='Div1'></div> 

Answer 4

假定要填充的div的ID为“结果”，并且表格单元格始终保持相同的顺序，您可以使用.find和.eq来获取这些值，然后将它们附加到结果div中：

 var selected = []; $('#users tbody').on('click', 'tr', function () { var id = this.id; var index = $.inArray(id, selected); if ( index === -1 ) { selected.push( id ); } else { selected.splice( index, 1 ); } $(this).toggleClass('selected'); // Find td's inside this tr and get the values from the 2nd and 4th ones var tds = $(this).find('td'); $('#results').append(tds.eq(1).text() + " - " + tds.eq(3).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="users"> <tbody> <tr class="even selected" role="row" id="row_231"> <td>231</td> <td class="sorting_1">John Doe</td> <td>23819</td> <td>test@yahoo.com</td> </tr> </tbody> </table> <br /><br /> Results <div id="results"></div>