如何排除包含具有特定类的TD的TR

Question

I have a function in which I take the first TR of my table and then I take all the TD of this TR. Now I need to modify this function: when I take the first TR I need to check that if all the TD of my TR have the class 'HD1' I need to take the second TR of the table. I put my function below. Thanks in advance.

 function getColumnsIdx(id) {
   var header = $("table#" + id + " thead tr:eq(1)");
   var header_fields = $("td", header);
   var header_idx = new Object();
   header_fields.each(function(idx, val) {
     var $$ = $(val);
     var key = $$.text();
     header_idx[key] = idx;
   });
 return header_idx;
}

Answer 1

You can look for the first td without that class, and then take its parent:

var header = $("table#" + id + " thead tr td:not(.HD1):eq(0)").parent();

This could, however, result in getting the third/fourth/etc row. If you must always return the second row, even if those cells also all have the HD1 class:

var header = $("table#" + id + " thead tr:eq(0)");
var header_fields = $("td", header);

if (header_fields.length && header_fields.length == header_fields.filter(".HD1").length) {
  header = header.next();
  header_fields = $("td", header);
}

Note: :eq() uses a zero-based index, so use eq(0) to select the first element.

Answer 2

You can check if the first row contains only class="HD1" elements by comparing the length of that selector to the length of the <td> elements in general.

If they're the same length (all of the <td> are HD1 ) - use the second row. Otherwise, use the first.

With HD1:

 let $row = $("thead tr:first > .HD1").length === $("thead tr:first > td").length ? $("table tr").eq(1) : $("table tr").first(); $row.css("color", "red"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td class="HD1">1</td> <td class="HD1">2</td> <td class="HD1">3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 

Without HD1:

 let $row = $("thead tr:first > .HD1").length === $("thead tr:first > td").length ? $("table tr").eq(1) : $("table tr").first(); $row.css("color", "red"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>