Question

例如：问题：使相应的表格单元格为红色。我知道我必须在样式中使用.tag className 但我不知道如何改变颜色 javascript中的html标签位于另一个函数中。

<style>
       .tag { background-color : red ; }
</style>
<script>
var str = ["B","I","N","G","O"];
function table()
{

      t+= "<tr>";
     for(b=0;b<5;b++)
     {
      t+="<td>"+ document.getElementById("table").innerHTML + str[b] + "</td>";
     }
    t+="</tr>";
}
function changeColor()
{
  var letter= document.getElementById("matching").value;
   for(i=0;i<5;i++)
   {
      if(letter == str[i])
      {
        /*
          here.
       */
      }
   }
}
</script>

Answer 1

尝试这样的事情：

var str = ["B", "I", "N", "G", "O"];

function table() {
  t += "<tr>";
  for (b = 0; b < 5; b++) {
    t += "<td" + (changeColor() ? " class='tag'" : "") + ">" +
      document.getElementById("table").innerHTML + str[b] +
      "</td>";
  }
  t += "</tr>";
}

function changeColor() {
  var letter = document.getElementById("matching").value;
  for (i = 0; i < 5; i++) {
    if (letter == str[i]) {
      return true;
    }
  }
  return false;
}

我会做一个演示，但我不知道HTML。

Answer 2

这是一个可能对您有所帮助的示例：

<html>
<head>
    <style>
        td {
            border: 2px solid green;
            padding: 30px;
        }
        .yellowColor{
            background-color: yellow;
        }
    </style>
</head>
<body>
    Enter Letter : <input type="text" id="matching">
    <br><br>
    <table id="tab">
        <tr>
        <td>a</td><td>b</td></tr>
        <tr><td>c</td><td>f</td></tr>
        <tr><td>b</td><td>a</td></tr>
    </table>
    <script>
        var tds = document.getElementsByTagName("td");
        var ele= document.getElementById("matching");
        ele.onkeyup =function(){changeColor();}
        function changeColor() {
            var i = 0;
            var letter = ele.value;
            for(i; i<tds.length;i++) {
            if(tds[i].innerHTML == letter){
                tds[i].style.backgroundColor = "yellow";
                //OR use this code; 
                //tds[i].classList.add("yellowColor");
            }
                else
                    tds[i].style.backgroundColor = "";
        }

        }
    </script>
</body>
</html>

如何在javascript函数之间操纵html标签？

2 个答案: