javascript - 如何使用javascript设置html中特定单元格的背景颜色？

我正在尝试通过简单的 JavaScript 设置 html 页面中单元格的背景颜色。下面是我的 html 和 javascript:


<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style>
.myTable { 
  width: 100%;
  text-align: left;
  background-color: lemonchiffon;
  border-collapse: collapse; 
  }
.myTable th { 
  background-color: goldenrod;
  color: white; 
  }
.myTable td, 
.myTable th { 
  padding: 10px;
  border: 1px solid goldenrod; 
  }
</style>
</head>

<body>
<meta http-equiv="refresh" content="30">    
<script src ="Json_Development_Test.js">
</script>

<!-- HTML -->
<table class="myTable">

    <tr>
        <th>PROJECT</th>
        <th>Service</th>
        <th>PrDC</th>
        <th>DDC</th>
        <th>Last Checked Time(IST)</th>
    </tr>
    <tr>

        <td>
         <div>
          <span id="headerID1">
           <p>Test</p>
           </span>
         </div>
        </td>
        <td>
         <div>
           <span id="header2">
           <p>Test2</p>
           </span>
         </div>
        </td>
        <td>
         <div>
           <p>Test3</p>
         </div>
        </td>
        <td>
         <div>
           <p>Test4</p>
         </div>
        </td>
        <td>
         <div>
           <p>Test5</p>
         </div>
        </td>
    </tr>

</table>

</body>
</html>

Javascript


window.addEventListener('load', function() {
    console.log('All assets are loaded')
  })

document.getElementById('headerID1').bgColor='#003F87'

预期结果:

我需要更改范围 id“headerID1”的背景颜色并遵循其他范围 id。

实际结果:

颜色没有改变，而是出现以下错误:

HTML1503: Unexpected start tag.
testDesign.html (26,1)

 SCRIPT5007: Unable to get property 'style' of undefined or null reference
Json_Development_Test.js (4,1)

 HTML1512: Unmatched end tag.
testDesign.html (32,1)

 HTML1506: Unexpected token.
testDesign.html (43,2)

2 HTML1530: Text found within a structural table element. Table text may only be placed inside "caption>", "td>", or "th>" elements.

谁能帮我解决这个错误？

最佳答案

除了与无效 HTML 相关的一些错误之外，正如其他人提到的，您的背景颜色不会改变，因为您输入 里面自  以来，这没有任何意义是一个段落和 是用于措辞内容的通用内联容器。如果你输入，它就会起作用。里面 :

<p id="header2">
   <span>...</span>
</p>

但是如果您想将背景应用于整个单元格，我建议您设置 <td> 的样式元素代替。检查以下示例:

document.getElementById('headerID1').style.backgroundColor = 'blue';
document.getElementById('header2').style.backgroundColor = 'lightblue';
document.getElementById('header3').style.backgroundColor = 'lightblue';

.myTable { 
  width: 100%;
  text-align: left;
  background-color: lemonchiffon;
  border-collapse: collapse; 
  }
.myTable th { 
  background-color: goldenrod;
  color: white; 
  }
.myTable td, 
.myTable th { 
  padding: 10px;
  border: 1px solid goldenrod; 
  }

<table class="myTable">
    <tr>
        <th>PROJECT</th>
        <th>Service</th>
        <th>PrDC</th>
        <th>DDC</th>
        <th>Last Checked Time(IST)</th>
    </tr>
    <tr>
      <td>
       <div>
        <span id="headerID1">
          <p>BG doesn't work</p>
         </span>
       </div>
      </td>
      <td>
       <div>
         <p id="header2">
          <span>BG works because &lt;span&gt; is inside &lt;p&gt;</span>
         </p>
       </div>
      </td>
      <td id="header3">
       <div>
         <p>BG for entire cell</p>
       </div>
      </td>
      <td>
       <div>
         <p>Test4</p>
       </div>
      </td>
      <td>
       <div>
         <p>Test5</p>
       </div>
      </td>
  </tr>
</table>

UPD:您可能会得到 SCRIPT5007: Unable to get property 'style' of undefined or null reference因为你的Json_Development_Test.js当其余文档尚未呈现时，脚本开始执行。您可以尝试:

输入 <script src ="Json_Development_Test.js">到 html 底部

输入此行 document.getElementById('headerID1').style.backgroundColor = 'blue';里面window.addEventListener('load', ...)回调:

window.addEventListener('load', function() {
    console.log('All assets are loaded');
    document.getElementById('headerID1').style.backgroundColor = 'blue';
});

关于javascript - 如何使用javascript设置html中特定单元格的背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58245008/

javascript - 如何使用javascript设置html中特定单元格的背景颜色？

上一篇：html - 使用 CSS 从右到左 div 并在 5 秒后隐藏

下一篇：javascript - 为什么我的边框没有变成指定的颜色？