javascript - 使用 JavaScript 导航 html 表

Question

下面是 HTML 的片段。我正在尝试为包含“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>

这是我的 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";
       }
    }
}

说实话，即使在第二行，它也很绊脚，所以我显然做错了什么。谁能建议一种有效的方法来做到这一点？

Answer 1

这应该可以完成工作:

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';
  }
}