I am attempting to target a table by its data attribute value. I would then like to find the first <td> of every <tr> in that table, and add a class to each <td> that is selected.

I attempted the following, however I am stuck in understanding the source of my error:

var mprimary = document.querySelectorAll("[data='regMultipleTable']");
for (var i = 0; i < mprimary.rows.length; i++) {
   var firstTD = mprimary.rows[i].cells[0];
   firstTD.className = 'your-the-first';
}

My table looks like this:

<table data="regMultipleTable">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tbody>
</table>

I want to target the td with values 1, 4, 7, etc... Please help

I am attempting to target a table by its data attribute value. I would then like to find the first <td> of every <tr> in that table, and add a class to each <td> that is selected.

I attempted the following, however I am stuck in understanding the source of my error:

var mprimary = document.querySelectorAll("[data='regMultipleTable']");
for (var i = 0; i < mprimary.rows.length; i++) {
   var firstTD = mprimary.rows[i].cells[0];
   firstTD.className = 'your-the-first';
}

My table looks like this:

<table data="regMultipleTable">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tbody>
</table>

I want to target the td with values 1, 4, 7, etc... Please help

• javascript
• html

• 2 Use querySelector, not querySelectorAll – Barmar Commented Aug 6, 2019 at 21:24
• document.querySelectorAll("table[data='regMultipleTable'] td:first-child") – Scott Marcus Commented Aug 6, 2019 at 21:24
• As an aside, it should be you're-the-first... though you probably don't want to go to the extent of escaping the apostrophe. – Obsidian Age Commented Aug 6, 2019 at 21:27
• @ObsidianAge, hehe yes! I would rather misspell the word in this case :) – klewis Commented Aug 6, 2019 at 21:31
• @Barmar thank you! you are correct. – klewis Commented Aug 6, 2019 at 21:31

4 Answers 4

You could simplify your logic by using the following selector:

table[data='regMultipleTable'] td:first-child

This selector means, "select the first td of every parent (row) in the table with data attribute of 'regMultipleTable'".

In code, this could look like:

var mprimary = document
.querySelectorAll("table[data='regMultipleTable'] td:first-child");

for (var node of mprimary) {
  
  node.classList.add("your-the-first");
}

.your-the-first {
  background:yellow;
}

<table data="regMultipleTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

querySelectorAll() returns a list of all the tables with that data attribute.

If there can be multiple such tables, you need to loop over them.

var mprimary = document.querySelectorAll("[data='regMultipleTable']");
mprimary.forEach(function(mprimary) {
  for (var i = 0; i < mprimary.rows.length; i++) {
    var firstTD = mprimary.rows[i].cells[0];
    firstTD.className = 'your-the-first';
  }
});

If there should only be one table, just use querySelector instead of querySelectorAll. It returns that single element instead of a list.

If all you're doing with the class is styling border, background, width, or visibility, you can put a <col> element in the table and apply the class to that:

.highlight {
  background-color: yellow;
}

<table data="regMultipleTable">
  <col class="highlight">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
  </tbody>
</table>

if you have a jquery in your project, you can do with one line

$("table[data='regMultipleTable'] tr td:first").addClass("your-the-first")

after @charlietfl ment;

$("table[data='regMultipleTable']").find("tr").find("td:first").addClass("your-the-first")

is better.