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内显示，选择每行的第2和第4列的内容。因此，使用上面的示例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和第4 td，则可以使用以下代码：

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() Selector

:nth-child() Selector

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为“results”且表格单元格始终保持相同的顺序，您可以使用.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>

当你只知道时，如何提取a的值

4 个答案: