更改特定单元格的背景颜色

时间：2016-02-15 22:40:30

标签： javascript css

我已经为我的学校制作了这个Formative Assessments Tracker，如果单元格的背景颜色如果相同则为绿色，如果它们不相同则为红色，则所需的数量为基础。

它是功能性的，但它只影响第一个细胞。我想知道我是否必须让id变得不同，或者是否有办法以更短，更不忙的方式做到这一点，以便只需点击一下按钮就可以影响所有细胞。

<html>
    <head>
        <title>Formative Assessments Tracker</title>
    </head>

    <body>
        <style>
            body {
                font-family: helvetica;
                font-size: 20px;
                padding: 40px;
                text-align: center;
            }
            td {
                padding: 20px;
                text-align: center;
            }
            .green {
                background-color: green;
                padding: 10px;
                text-align: center;
            }
            .gray {
                background-color: gray;
                padding: 50px;
                text-align: center;
            }
            .red {
                background-color: red;
                padding: 10px;
                text-align: center;
            }
            .white {
                background-color: white;
                padding: 10px;
                text-align: center;
            }
        </style>

        <body>
            <h3>HIGH SCHOOL</h3>
            <h2>FORMATIVE ASSESSMENTS TRACKER</h2> # of FAs that should have been submitted:
            <input type="text" id="required">
            <button onclick="submission()">Submit</button>

            <script>
                function submission() {
                    var r = document.getElementById("required").value;
                    var s = document.getElementById("submitted").value;
                    if (r == s) {
                        document.getElementById('name').style.backgroundColor = "green";
                    } else {
                        document.getElementById('name').style.backgroundColor = "red";
                    }
                }
            </script>

            <table border="1">

                <tr>
                    <td id="name" class="green">NAME</td>
                    <td id="name" class="green">NAME</td>


     <td id="name" class="green">NAME</td>
            </tr>
            <tr>
                <td class="gray" </td>
                    <td class="gray" </td>
                        <td class="gray" </td>
            </tr>
            <tr>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
            </tr>

            <tr>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
            </tr>
            <tr>
                <td class="gray" </td>
                    <td class="gray" </td>
                        <td class="gray" </td>
            </tr>
            <tr>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
            </tr>

            <tr>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
                <td id="name" class="green">NAME</td>
            </tr>
            <tr>
                <td class="gray" </td>
                    <td class="gray" </td>
                        <td class="gray" </td>
            </tr>
            <tr>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
                <td class="white"># of FAs Submitted:
                    <input type="text" id="submitted">
                </td>
            </tr>

        </table>

    </body>

3 个答案:

答案 0 :(得分：2)

我修改了您的代码以解决您的问题。

答案是肯定的，你应该为每个元素使用不同的ID。但是你可以使用类来实现＆＃39; group＆＃39;元素，然后使用 getElementsByClassName 等方法获取它们 我在你的代码中实现了类和方法getElementsByClassName，现在它正在工作。

这是你的代码：

＆＃13;
＆＃13; 
<html>

<head>
  <title>Formative Assessments Tracker</title>

  <style>
    body {
      font-family: helvetica;
      font-size: 20px;
      padding: 40px;
      text-align: center;
    }

    td {
      padding: 20px;
      text-align: center;
    }

    .green {
      background-color: green;
      padding: 10px;
      text-align: center;
    }

    .gray {
      background-color: gray;
      padding: 50px;
      text-align: center;
    }

    .red {
      background-color: red;
      padding: 10px;
      text-align: center;
    }

    .white {
      background-color: white;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>

<body>



  <h3>HIGH SCHOOL</h3>
  <h2>FORMATIVE ASSESSMENTS TRACKER</h2>
  # of FAs that should have been submitted:
  <input type="text" id="required">
  <button onclick="submission()">Submit</button>

  <script>
    function submission() {
      var r = document.getElementById("required").value;
      var sElements = document.getElementsByClassName("submitted");
      for (i = 0; i < sElements.length; i++) {
        if(sElements[i].value == r){
          sElements[i].style.backgroundColor = "green";
        }else{
          sElements[i].style.backgroundColor = "red";
        }
      }
    }
  </script>

  <table border="1">

    <tr>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
    </tr>
    <tr>
      <td class="gray" </td>
        <td class="gray" </td>
          <td class="gray" </td>
    </tr>
    <tr>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
    </tr>

    <tr>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
    </tr>
    <tr>
      <td class="gray" </td>
        <td class="gray" </td>
          <td class="gray" </td>
    </tr>
    <tr>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
    </tr>

    <tr>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
      <td id="name" class="green">NAME</td>
    </tr>
    <tr>
      <td class="gray" </td>
        <td class="gray" </td>
          <td class="gray" </td>
    </tr>
    <tr>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
      <td class="white"># of FAs Submitted:
        <input type="text" class="submitted">
      </td>
    </tr>

  </table>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

  

我想知道我是否必须使id不同

YES

需要唯一身份证。

  

或者是否有办法以更短，更不忙的方式做到这一点

是

确保您的输入有共同点，然后使用以下任何一种（非详尽列表）：

例如，将submitted和name的所有重复ID更改为类，然后使用getElementsByClassName和循环或[].forEach.call。

此外，<td class="gray"</td>是无效的HTML。您需要另一个结束尖括号：<td class="gray"></td>。

＆＃13;
＆＃13; 
function submission () {
    var r = document.getElementById('required').value,
        s = document.getElementsByClassName('submitted'),
        n = document.getElementsByClassName('name');

    for (var i = 0; i < s.length; i++) {
        if (r === s[i].value)
            n[i].style.backgroundColor = 'green';
        else
            n[i].style.backgroundColor = 'red';
    }
}
＆＃13; 
body {
    font-family: helvetica;
    font-size: 20px;
    padding: 40px;
    text-align: center;
}

td {
    padding: 20px;
    text-align: center;
}

.green {
    background-color: green;
    padding: 10px;
    text-align: center;
}

.gray {
    background-color: gray;
    padding: 50px;
    text-align: center;
}

.red {
    background-color: red;
    padding: 10px;
    text-align: center;
}

.white {
    background-color: white;
    padding: 10px;
    text-align: center;
}
＆＃13; 
<h3>HIGH SCHOOL</h3>
<h2>FORMATIVE ASSESSMENTS TRACKER</h2> # of FAs that should have been submitted:
<input type="text" id="required">
<button onclick="submission()">Submit</button>
<table border="1">
    <tr>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
    </tr>
    <tr>
        <td class="gray"></td>
        <td class="gray"></td>
        <td class="gray"></td>
    </tr>
    <tr>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
    </tr>

    <tr>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
    </tr>
    <tr>
        <td class="gray"></td>
        <td class="gray"></td>
        <td class="gray"></td>
    </tr>
    <tr>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
    </tr>

    <tr>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
        <td class="name green">NAME</td>
    </tr>
    <tr>
        <td class="gray"></td>
        <td class="gray"></td>
        <td class="gray"></td>
    </tr>
    <tr>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
        <td class="white"># of FAs Submitted:
            <input type="text" class="submitted">
        </td>
    </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

尝试使用类名而不是id：

<script>
    function submission(){
       var r = document.getElementById("required").value;
       var s = document.getElementById("submitted").value;
       if (r==s){
           document.getElementsByClassName('green').style.backgroundColor="green";
       }
       else{
           document.getElementsByClassName('green').style.backgroundColor="red";
       }
     }
</script>
相关问题
最新问题