CODEWITHSUNDEEP
jquery
Sandeep Bhardwaj
Sandeep Bhardwaj

Reputation: 1350

Get all rows excluding a column jQuery

I am using below code to read all the rows of a table.

Now, I want to exclude a particular a column which has class "exclude" while finding all the tr.

var rows = $("#" + myTableId).find("tr");

Upvotes: 2

Views: 666

Answers (3)

Peter B
Peter B

Reputation: 24187

If you don't care so much for the rows (<tr>) and more for the cells (<td>), then you can gather the cells in a simple array of 2 levels deep, as below. The first level of the array acts as the rows, the next level contains the cells (those that match the filter).

The advantage is that you have access to the original cells, not duplicated cells in duplicated rows, so if you need to manipulate the cells (e.g. change their content or their css) then you can do so with ease.

var rows = [];
$("#table tr").each(function(index, row) {
  rows.push($(row).find("td").not(".exclude"));
});

// What follows next is just to show the result

for (var i = 0; i < rows.length; i++) {
  console.log("rows[" + i + "] --> " + GetCellInfo(rows[i]));
}

function GetCellInfo(cells) {
  var str = "|";
  for (var i = 0; i < cells.length; i++) {
    str += " " + cells[i].innerText + " |";
  }
  return str;
}
#table td {
  background: #ddd
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>A</td>
    <td>B</td>
    <td class="exclude">XX</td>
  </tr>
  <tr>
    <td>A</td>
    <td class="exclude">XX</td>
    <td>C</td>
  </tr>
  <tr>
    <td class="exclude">XX</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Upvotes: 0

hityagi
hityagi

Reputation: 5256

If your table structure is how I imagined it, then you can do it this way:

Iterate over rows and create replica rows without exclude column.

$(function() {
  var rows = [];
  $("#table").clone().find("tr").each(function() {
    var $row = $("<tr>");
    $(this).find("td").not(".exclude").each(function() {
      $row.append($(this));
    });
    rows.push($row);
  });
  console.log(rows);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr><td>1</td><td>11</td><td class="exclude">111</td></tr>
<tr><td>2</td><td class="exclude">22</td><td>222</td></tr>
<tr><td class="exclude">3</td><td>33</td><td>333</td></tr>
</table>

If you need a shorter solution:

It has many assumptions related to it, but I guess it should work fine for you:

$(function() {
  var $table = $("#table").clone();
  $table.find(".exclude").remove();
  var rows = $table.find("tr");
  
  console.log(rows);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr><td>1</td><td>11</td><td class="exclude">111</td></tr>
<tr><td>2</td><td class="exclude">22</td><td>222</td></tr>
<tr><td class="exclude">3</td><td>33</td><td>333</td></tr>
</table>

Upvotes: 1

Adam
Adam

Reputation: 1159

You can use jQuery's .not() function (http://api.jquery.com/not/) to exclude matching elements:

$( "tr" ).not( ".exclude" );

This will select all <tr> elements that do not have the exclude class.

Upvotes: 0

Related Questions