Question

下面是HTML的一个片段。我试图为包含＆＃34; Bananas＆＃34;的标签的背景着色。

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

Answer 2

您应该使用tds [n] .innerText而不是tds [n] .innerHTML

Difference between innerText and innerHTML in javascript

Answer 3

这是一个基于jquery的解决方案：

//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");

这是一个简单的Javascript解决方案：

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

然而，将可自定义，可重用的东西变得很好。在我们的例子中，我们可以做一个功能。 jquery版本：

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

用法：

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

普通的Javascript功能

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

用法：

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

从长远来看，这种使代码更通用的方式对你有很大的帮助。

使用JavaScript

3 个答案: