JQuery html表搜索的属性很多

Question

我想在每一行上搜索三个属性。

我能够通过一个属性进行搜索，如下所示：

var rows = $("#tbl1 > tbody > tr[cName=1]");  

但这引发了错误：

var rows = $("#tbl1 > tbody > tr[cName=1,cLastN=2]"); 

如何按所有三个属性进行搜索？

$("#btn1").click(function(){
  debugger;
  var rows = $("#tbl1 > tbody > tr[cName=1]");    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl1' >
  <thead>
    <tr>
      <th>Number</th>
      <th>Name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr cName='1' cLastN='2' cMiddleN='3'>
      <td>1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
      <tr cName='2' cLastN='2' cMiddleN='4'>
      <td>1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
      <tr cName='5' cLastN='7' cMiddleN='3'>
      <td>1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    
    
  </tbody>
  
  
</table>

<br/>
<br/>
<button id="btn1">Search</button>

Answer 1

您可以使用逗号（，）来表示OR选择器

$("#btn1").click(function(){
  debugger;
  var rows = $("#tbl1 > tbody > tr[cName=1]  , #tbl1 > tbody > tr[cName=2], #tbl1 > tbody > tr[cName=3]"); 
  console.log(rows)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl1' >
  <thead>
    <tr>
      <th>Number</th>
      <th>Name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr cName='1' cLastN='2' cMiddleN='3'>
      <td>1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
      <tr cName='2' cLastN='2' cMiddleN='4'>
      <td>1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
      <tr cName='5' cLastN='7' cMiddleN='3'>
      <td>1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    
    
  </tbody>
  
  
</table>

<br/>
<br/>
<button id="btn1">Search</button>

Answer 2

。根据您的要求，您需要单独包含属性选择器。如果要选择具有任一属性的任何元素（即OR逻辑），请使用：

var rows = $('#tbl1 > tbody > tr[cName="1"], #tbl1 > tbody > tr[cLastN="2"]'); 

如果你想要具有两个属性的元素（即.AND），请使用：

var rows = $('#tbl1 > tbody > tr[cName="1"][cLastN="2"]'); 

另请注意，您使用的是完全非标准的属性，这可能会导致JS出现问题。我建议改为将其更改为data-*属性。