Question

我有一张表：

<table>
  <tr>
    <td id="test">ACT</td>
  </tr>
</table>

我想根据输入位置为“ACT”的一个字符着色，所以我写了一个js脚本：

<script type="text/javascript" language="javascript">
    function changeBaseColor(idToChanged, position){
        var myElement = document.getElementById(idToChanged);
        var myString = myElement.innerHTML;
        var myNewString = "";

        for(var i=0; i<3; i++){
            var myCharacter = myString.substr(i,1);
            if(i == 0){
                 if(position == 0){
                     myNewString = "<span style='color: red'>" + myCharacter+ "</span>";
                 }else{
                     myNewString =  myCharacter;
                 }
            }else{
                if(i == position){
                    myNewString = myNewString + "<span style='color: red'>" + myCharacter + "</span>";
                }else{
                    myNewString = myNewString + myCharacter;
                }
            }
        }
        myElement.innerHTML = myNewString;
    }
</script>

然后，我尝试添加函数：

<script>changeBaseColor("test","0")</script>

当位置为1或2时，它运行成功。但是，当值为0时，它只输出：

<sp

我认为它无法理解以“＆lt;”开头的值，但是当我使用以下测试时，它会运行成功并且似乎可以识别以“＆lt;”开头：

 document.getElementById("test").innerHTML = "<span style='color: red;'>A</span><span>C</span><span>T</span>"

google之后，我没有找到任何建议，你能帮我解决一下吗？

任何建议都会感激不尽。

祝福！

Answer 1

我认为您可以像这样简化您的方法：

function changeBaseColor(idToChanged, position) {
    var myElement = document.getElementById(idToChanged);
    var myString = myElement.innerHTML;
    var myNewString = "";

    for(var i = 0; i < myString.length; i++) {
        if(i == position) {
             myNewString += "<span style='color: red'>" + myString[i] + "</span>";
        }
        else {
             myNewString += myString[i]; 
        }
   }
   myElement.innerHTML = myNewString;
}

使用innerHTML在js中分配值失败

1 个答案: