Get td element by value

Question

i am trying to change certain td value color, but since it doesnt have any id how should i get it with javascript?

<td class="fieldlabel" width="20%">Mark</td>
<td class="fieldlabel" width="20%">Mary</td>
<td class="fieldlabel" width="20%">Alex</td>

For example i wish to change "Mary" to red color, how can i achive it without knowing any div or id ?

var mary = ....?
mary.style.color = "#ff0000";

You can use jQuery [link](https://api.jquery.com/text-selector/) — Kamil Socha, Jul 28 '17 at 12:16
@KamilSocha Please don't suggest jQuery when it's neither tagged, nor asked for. — evolutionxbox, Jul 28 '17 at 12:20
https://stackoverflow.com/questions/2751062/js-dom-get-elements-by-text-content , https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext , and there are more, just pick yours ... — Teemu, Jul 28 '17 at 12:21

score 3 · Answer 1 · answered Jul 28 '17 at 12:19

Use document.querySelectorAll() to get the reference of targeted elements then iterate these elements and validate their text using textContent property.

document.querySelectorAll('td.fieldlabel').forEach(function(x) {
  if (x.textContent.trim() == 'Mary') {
    x.style.color = "#ff0000";
  }
})

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

score 1 · Answer 2 · answered Jul 28 '17 at 12:22

1

Assuming you know the position where "mary" is, you can change the color directly.

var secondTd = document.getElementsByClassName("fieldlabel")[1];
secondTd.style.color = "red";

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

answered Jul 28 '17 at 12:22

Mathiasfc

1,627
1
16
24

If OP knows the position then `.fieldlabel:nth-child(2) { color: red; }` would work no need of JS – Satpal Jul 28 '17 at 12:25

codtex · Answer 3 · 2017-07-28T12:47:59.507

Check this simple <table></table> wrapper. You can change the color by value with changeColorByValue() or by coordinates with changeColorByCoords()(this method is using zero based coordinates this means if you want to refer to first row you pass 0).

changeColorByValue() accepts as first parameter the value that should be searched for, second parameter is the new color and third(optional) is if the search should continue after match. Check the dome code.

Have a look on the code and tell me if something is unclear

var table = new Table('myTable');
table.changeColorByValue('Mary', '#ff0000');
table.changeColorByValue('Chris', 'orange', true);
table.changeColorByCoords(1, 2, 'green');

function Table(tableId) {
  var self = this;
  self.table = document.getElementById(tableId);

  self.changeColorByValue = function(sought, color, stopOnFirstMatch) {

    var table = self.table;
    var stopOnFirst = typeof stopOnFirstMatch !== 'undefined' ? stopOnFirstMatch : false;
    
    exit:
    for (var i = 0, row; row = table.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
        if (col.innerHTML === sought) {
          col.style.color = color;
          if (stopOnFirst) {
            break exit;
          }
        }
      }
    }
    
  }

  self.changeColorByCoords = function(row, col, color) {
    try {
      self.table.rows[row].cells[col].style.color = color;
    } catch (e) {}
  }

}

<table id="myTable">
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
  <tr>
    <td class="fieldlabel" width="20%">Chris</td>
    <td class="fieldlabel" width="20%">Alan</td>
    <td class="fieldlabel" width="20%">Brian</td>
  </tr>
  <tr>
    <td class="fieldlabel" width="20%">Chris</td>
    <td class="fieldlabel" width="20%">John</td>
    <td class="fieldlabel" width="20%">Mary</td>
  </tr>
</table>

score 0 · Answer 4 · answered Jul 28 '17 at 12:39

This is just meant to be an addition to Satpal's answer.

A more functional approach:

Array.from(document.querySelectorAll('td.fieldlabel'))
    .filter(el => el.textContent.trim() === 'Mary')
    .forEach(x =>x.style.color = "#ff0000");

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

Assuming there is only one element containing "Mary":

Array.from(document.querySelectorAll('td.fieldlabel'))
    .find(el => el.textContent.trim() === 'Mary')
    .style.color = "#ff0000";

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

Get td element by value

4 Answers4