Select the first cell of each row placed after a merged cell using JavaScript/jQuery

Question

I have a table with class evo-table, which has two cells of row span of 4, followed by four rows with two cells each (Image). I want to select the first cell of each of these rows using JavaScript. I know I could simply add classes to cells and style it using CSS but I'm restricted to the Table structure below. I am able to select and add CSS to the first cell of the first row using $(".highlight").next().css("background","lightgreen"); but I'm not able to select the first cell of the rest of the rows. Here's the code:

HTML: (This is a DEMO only)

<table class="evo-table">
    <tr>
        <td rowspan="4">Merged Cell 1</td>
        <td rowspan="4" class="highlight">Merged Cell 2</td>
        <td>Unmerged Cell 1</td>
        <td>Unmerged Cell 2</td>
    </tr>
    <tr>
        <td>Unmerged Cell 3</td>
        <td>Unmerged Cell 4</td>
    </tr>
    <tr>
        <td>Unmerged Cell 5</td>
        <td>Unmerged Cell 6</td>
    </tr>
    <tr>
        <td>Unmerged Cell 7</td>
        <td>Unmerged Cell 8</td>
    </tr>
<table>

jQuery/JavaScript:

var tableObj = $(".evo-table");
var mergeLength = $(".evo-table .highlight").attr("rowspan");
var firstRowAfterHighlight = $(".evolution-table .highlight").parent().next().index + 1;
$(".highlight").next().css("background","lightgreen");
for (count = 0;  count < mergeLength; count = count + 1) {
    $(".evolution-table tr:nth-child(" + (firstRowAfterHighlight + count) + ") td:first-child:not(.highlight)").css("background-color", "green")
}

I am using the rowspan value of .highlight cell to find the number of rows (I could use $(".evo-table tr").length; to get it but the previous one is more useful in my case as I want to select rows which are immediately to the right of the cell) and I'm finding the index of the row after first row and using count variable of the for statement to move on to the next row, and using the :first-child selector on td to select the first cell of every row. The code doesn't seem to work.

jsFiddle

Please reply if you spot any errors in my code, need more details or have a solution. Thank you.

Neil Neil · Accepted Answer · 2018-04-06T21:54:35

I used the .each function to iterate over every row. And then I used teh :not selector to ignore elements with the attribute [rowspan].

$(".evo-table tr").each(function () {
  $(this).find("td:not([rowspan]):first").css("background-color", "red")
});

* {
  font-family:Arial;
}
.evo-table {
  border-collapse:collapse;
  border:1px solid lightgrey;
}
.evo-table td {
  padding:4px;
  border: 1px solid lightgrey;
}
.highlight {
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="evo-table">
    <tr>
        <td rowspan="4">Merged Cell 1</td>
        <td rowspan="4" class="highlight">Merged Cell 2</td>
        <td>Unmerged Cell 1</td>
        <td>Unmerged Cell 2</td>
    </tr>
    <tr>
        <td>Unmerged Cell 3</td>
        <td>Unmerged Cell 4</td>
    </tr>
    <tr>
        <td>Unmerged Cell 5</td>
        <td>Unmerged Cell 6</td>
    </tr>
    <tr>
        <td>Unmerged Cell 7</td>
        <td>Unmerged Cell 8</td>
    </tr>
<table>
<div style="font-size:12px;color:lightgrey;">
Yellow = .highlight class; Green = Selected using jQuery;
</div>

Select the first cell of each row placed after a merged cell using JavaScript/jQuery

2 Answers