add class to nth-child

Question

I need to add a class to tbody td elements where td position increments by 1 for each row:

Can't make it work, I have tried a few examples with no results.

+-----+-------------+-------------+--------------+
|     |     A       |      B      |      C       |
+-----+-------------+-------------+--------------+
| A   | td addClass |             |              |
|     |             |             |              |
| B   |             | td addClass |              |
|     |             |             |              |
| C   |             |             | td addClass  |
+-----+-------------+-------------+--------------+

This is how my HTML looks like

<table class="table display">
    <thead>
        <tr>
            <th></th>
            <?php
            $counts = count($users);
            foreach ($users as $row) {
                echo '<th>'.$row->user.'</th>';
            }
            ?>
        </tr>
    </thead>

    <tbody>
        <?php
        $startC = 1;

        foreach( $users as $row ) {
            echo '<tr class="tbody_tr_" id="'.$startC++.'">';
            echo '<td>'.$users->user.'</td>';

            for($i=0; $i<$counts; $i++) {
                echo '<td class="selectable"><a href="#"></a></td>';
            }

            echo '</tr>';
        }
        ?>
    </tbody>
</table>

Answer 1

You can do something like this: Basically you can compare $i with startC where they are equal add your class, due to you are adding your class where col number and row number are the same.

<table class="table display">
    <thead>
        <tr>
          <th></th>
          <?php
          $counts = count($users);
             foreach ($users as $row) {
                echo '<th>'.$row->user.'</th>';
             }
          ?>
       </tr>
    </thead>

    <tbody>
       <?php
  $startC = 1;

foreach( $users as $row ) {
   echo '<tr class="tbody_tr_" id="'.$startC.'">';
   echo '<td>'.$users->user.'</td>';

   for($i=0; $i<$counts; $i++) {
      if($i == $startC)
      {
          echo '<td class="selectable addClass"><a href="#"></a></td>';
      }
      else
      {
          echo '<td class="selectable"><a href="#"></a></td>';
      }
   }
   $startC++;
   echo '</tr>';
}
       ?>
    </tbody>
</table>

Answer 2

You can actually just iterate the $users array again to generate the columns. It won't interfere with the outer loop because foreach operates on a copy of the array. If you keep track of the indexes in each loop, you can add the class when the row and column indexes match.

foreach ($users as $rowindex => $row) {

    echo '<tr class="tbody_tr_" id="' . $startC++ . '">';
    echo '<td>' . $row->user . '</td>';

    foreach ($users as $columnindex => $column) {

        if ($columnindex == $rowindex) {
            echo '<td class="selectable newClass"><a href="#"></a></td>';
        } else {
            echo '<td class="selectable"><a href="#"></a></td>';
        }
    }

    echo '</tr>';
}

(This also means you won't need to count($users) beforehand, unless you're using that count for something else as well.)

Answer 3

As your question is tagged javascript, i think you must consider a JS solution. It allows a simpler PHP code to build the table and let the client do the job, with a simpler approach.

<style>
.klass { color: red }
</style>

<table id="myTable">
<thead>
<tr> <th>A</th> <th>B</th> <th>C</th> </tr>
</thead>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> </tr>
</tbody>
</table>

<script>
var index = 0;
document.querySelectorAll("#myTable tbody tr")
        .forEach((tr)=> tr.querySelectorAll('td')[index++].className += " klass")
</script>