JavaScript 替换 td 元素中的子字符串

Question

这个问题已经有答案了:

Replace method doesn't work (4 个回答)

已关闭 4 年前。

经过多次尝试和大量搜索，我还没有找到这个问题的解决方案(尽管我在 Javascript 方面不是很有经验!)。我有一个表(将动态构建)，我希望在其中用图标替换关键字。这些关键字只能是“绿色”或“黄色”，但是作为字符串一部分的日期是动态的，需要保留(我稍后会整理其格式)。

我的 HTML:

    <table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
    <tr><th>Name</th><th>SOP ABC</th></tr>

    <tr><td>Mary Coppen</td><td>Green10/5/18</td></tr>
    <tr><td>Arlana Mycroft</td><td>Green12/6/18</td></tr>
    <tr><td>Bob Litchfield</td><td>Yellow05/09/18</td></tr>
    </table>

我的 JavaScript:

    var tds = document.getElementsByTagName('td');
    var Gimg = "<img src='/Content/StatusOK_16x.gif' />";
    var Yimg = "<img src='/Content/StatusWarning_12x_16x.gif' />";
    for (var i = 0; tds[i]; i++) {

    if (tds[i].innerHTML.includes('Green')) {
        tds[i].innerHTML.replace('Green', Gimg)
    }
    if (tds[i].innerHTML.includes('Yellow')) {
        tds[i].innerHTML.replace('Yellow', Yimg)
    }    
    }

JSFiddle

非常感谢您的建议!

Answer 1

.replace 返回您需要分配给目标 innerHTML

的字符串

试试这个代码:

var tds = document.getElementsByTagName('td');
var Gimg = "<img src='/Content/StatusOK_16x.gif' />";
var Yimg = "<img src='/Content/StatusWarning_12x_16x.gif' />";
for (var i = 0; i < tds.length; i++) {

    if (tds[i].innerHTML.includes('Green')) {
        tds[i].innerHTML = tds[i].innerHTML.replace('Green', Gimg)
    }
    if (tds[i].innerHTML.includes('Yellow')) {
        tds[i].innerHTML = tds[i].innerHTML.replace('Yellow', Yimg)
    }    
}

编辑:- i< tds[i].length-1 将排除最后一个元素。