Question

24

Changing style elements based on cell contents

rated 0 times [ 28] [ 4] / answers: 1 / hits: 30016 / 13 Years ago, wed, january 4, 2012, 12:00:00

I have a table, like so:

<table>

  <tr>

    <td>one</td>

    <td>two</td>

  </tr>

  <tr>

    <td>three</td>

    <td>one</td>

  </tr>

</table>

Using Javascript, how can I search the table and change a style element (e.g. backgroundColor) based on the contents of a cell (e.g. make the background color of all cells with the word 'one' in them red)?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

collinisaaka

Add To Favorites

Follow

Total Points: 194

Total Questions: 105

Total Answers: 104

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

collinisaaka questions

1 Compare two arrays of objects, and remove if object value is equal

Wed, Mar 2, 22, 00:00, 2 Years ago

1 REACTJS giving the following error: TypeError: navigate.push is not a function

Tue, Nov 23, 21, 00:00, 3 Years ago

1 ReferenceError: Cannot access before initialization circular dependency

Fri, Jul 9, 21, 00:00, 3 Years ago

1 React Hook useEffect to fetch data from local json file to create a details page

Tue, Sep 15, 20, 00:00, 4 Years ago

1 create a curved bottom navigation (before after implementation)

Wed, Jul 1, 20, 00:00, 4 Years ago

View All

answered 13 Years ago malkajillc · Accepted Answer

DEMO

var allTableCells = document.getElementsByTagName(td);



for(var i = 0, max = allTableCells.length; i < max; i++) {

    var node = allTableCells[i];



    //get the text from the first child node - which should be a text node

    var currentText = node.childNodes[0].nodeValue; 



    //check for 'one' and assign this table cell's background color accordingly 

    if (currentText === one)

        node.style.backgroundColor = red;

}