aye26
aye26

Reputation: 179

How to change column cell color of a table based on other column value in JavaScript?

I have the following table.

<table id="Alter" class="table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="Iss in Recent">
            <td id='Tra'>{{Iss.Type}}</td>
            <td id='Qut' style="text-align: right;">{{Iss.Quantity | number : fractionSize}}</td>
        </tr>
    </tbody>
</table>

I want to change the color of Quantity cell based on type value. IF Type="some value" Color(Quantity)='red'.
I am having trouble getting the cell values.
I tried this to get the values:

var table1 = document.getElementById('Alter');

for (var i = 0; i < table1.tBodies.length; i++) {

    var rows = table1.tBodies[i].rows;
    for (var j = 0; j < rows.length; j++) {

        var cells = rows[j].cells;
        for (var k = 0; k < cells.length; k++) {
            console.log(cells[k]);
        }
    }
}

But this isnt working. I am using JavaScript. Any suggestions?

Upvotes: 2

Views: 346

Answers (2)

The KNVB
The KNVB

Reputation: 3844

For better compatibility, cells[k].textContent should be used.

Upvotes: 0

Liem Do
Liem Do

Reputation: 943

Just use cells[k].innerText you can get the text inside tag

Upvotes: 1

Related Questions