CODEWITHSUNDEEP
javascripthtml-table
David
David

Reputation: 1232

Navigate html table with JavaScript

Below is a snippet of the HTML. I'm trying to color the background of the tag that contains "Bananas".

<frame src="blah" name="navigation">
    <table id="menu">
        <tbody>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    Apples
                                </td>
                                <td>
                                    <input class="button">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    Bananas
                                </td>
                                <td>
                                    <input class="button">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    Carrots
                                </td>
                                <td>
                                    <input class="button">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</frame>

This is my JavaScript:

var t = navigation.document.getElementById("menu");
var trs = t.getElementsByTagName("tr");
var tds = null;

for (var i=0; i<trs.length; i++)
{
    tds = trs[i].getElementsByTagName("td");
    for (var n=0; n<trs.length;n++) {
        if(tds[n].innerHTML == "Bananas") {
          tds[n].bgcolor="#FF0000";
       }
    }
}

To be honest it's stumbling even on the 2nd line so I'm clearly doing something wrong. Can anyone suggest an efficient way to do this please?

Upvotes: 0

Views: 2716

Answers (3)

Lajos Arpad
Lajos Arpad

Reputation: 76554

This is a jquery-based solution:

//See: http://stackoverflow.com/questions/8779728/getting-element-within-frame-using-jquery
$("td", window.parent.frames[0].document).filter(function() {
    return this.innerText.indexOf("Bananas") + 1;
}).css("background-color", "yellow");

This is a plain Javascript solution:

var items = window.frames[0].document.getElementsByTagName("td");
for (var item in items) {
    if ((items[item].innerText) && (items[item].innerText.indexOf("Bananas") + 1)) {
        items[item].style["background-color"] = "yellow";
    }
}

However, it is nice to make things customizable, reusable. In our case, we could do a function. jquery version:

function jQueryBanana(context, test, operation) {
    context.filter(function() {
        test(this);
    }).operation($(this));
}

Usage:

jQueryBanana($("td", window.parent.frames[0].document), function(record) {
    return record.innerText + (record.innerText.indexOf("Bananas") + 1);
}, function(record) {
    record.css("background-color", "yellow");
});

Plain Javascript function

function vanillaBanana(items, test, operation) {
    for (var item in items) {
        if (test(items[item])) operation[items[item]];
    }
}

Usage:

vanillaBanana(window.frames[0].document.getElementsByTagName("td"), function(record) {
    return record.innerText && (record.innerText.indexOf("Bananas") + 1);
}, function(record) {
    record.style["background-color"] = "yellow";
});

This way of making your code more generic wll help you a lot in the long run.

Upvotes: 1

Eskil Fogelstr&#246;m
Eskil Fogelstr&#246;m

Reputation: 76

This should do the job:

var table = document.getElementById('menu');
var tds = table.querySelectorAll('td');

for (var i = 0; i < tds.length; i++) {
  var td = tds[i];
  if (td.innerHTML.trim() === 'Bananas') {
    td.style.backgroundColor = 'red';
  }
}

Upvotes: 2

Siamand
Siamand

Reputation: 1080

You should use tds[n].innerText instead of tds[n].innerHTML

Difference between innerText and innerHTML in javascript

Upvotes: 1

Related Questions