如何在通过jQuery中的属性过滤行的表中获取所有tr和td

Question

我有一个包含行的表，其中任何行都有一个称为entity-state的属性。 我从entity-state !== 'deleted'行中获得了所有td 。

<table>
    <tr entity-state="deleted"> 
        <td>1</td> 
        <td>2</td> 
    </tr>
    <tr entity-state="added"> 
        <td>3</td> 
        <td>4</td> 
    </tr>
    <tr entity-state="added"> 
        <td>5</td> 
        <td>6</td>  
    </tr>
</table>

我想获取仅added entity-state行中的所有td值。

Answer 1

您可以为此使用属性选择器：

$('tr[entity-state="added"]');
// or
// $('tr:not([entity-state="deleted"])');

您应注意， entity-state是非标准属性，将意味着您的HTML无效。 为了解决这个问题，您应该改用data-*属性：

<tr data-entity-state="deleted"> 
    <td>1</td> 
    <td>2</td> 
</tr>
<tr data-entity-state="added"> 
    <td>3</td> 
    <td>4</td> 
</tr>

$('tr[data-entity-state="added"]');

也可以使用filter()实现所需的功能，这在使用data-*属性时非常有用，因为通过jQuery更改其值不会更新DOM。

var $enabledRows = $('tr').filter(function() {
    return $(this).data('entity-state') == 'added';
    // or:
    // return $(this).data('entity-state') !== 'deleted';
});

Answer 2

您可以结合使用属性等于选择器和:not() （或not() ）选择器

$('tr:not([entity-state="deleted"])')

要么

$('tr').not('[entity-state="deleted"]')

 $('tr:not([entity-state="deleted"])') // or $('tr').not('[entity-state="deleted"]') .css('color', 'red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr entity-state="deleted"> <td>1</td> <td>2</td> </tr> <tr entity-state="added"> <td>3</td> <td>4</td> </tr> <tr entity-state="added"> <td>5</td> <td>6</td> </tr> </table> 

Answer 3

 $('table tr[entity-state=added]').each(function(i,v){ var $td = $(this).find('td') console.log($td.text()) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr entity-state="deleted"> <td>1</td> <td>2</td> </tr> <tr entity-state="added"> <td>3</td> <td>4</td> </tr> <tr entity-state="added"> <td>5</td> <td>6</td> </tr> </table> 

1. 为此使用attr选择器

Answer 4

您可以将not selector与attribute selector一起使用，

$("tr:not([entity-state='deleted']) td").each(function() {
  console.log($(this).text())
});