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

时间:2016-06-14 08:09:48

标签: javascript jquery

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

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

我想获取tdentity-state行的所有added值。

4 个答案:

答案 0 :(得分:2)

您可以使用属性选择器:

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

答案 1 :(得分:1)

您可以结合使用 attribute equals selector :not() (或 not() )选择器< / p>

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

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

&#13;
&#13;
$('tr:not([entity-state="deleted"])')
  // or $('tr').not('[entity-state="deleted"]')
  .css('color', 'red')
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

&#13;
&#13;
$('table tr[entity-state=added]').each(function(i,v){
var $td = $(this).find('td')

console.log($td.text())

})
&#13;
<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>
&#13;
&#13;
&#13;

  1. 使用attr选择器

答案 3 :(得分:0)

您可以使用not selector with attribute selector,

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