Как установить цвет фона указанной ячейки в HTML с помощью JavaScript? - PullRequest
Новая
       10

Как установить цвет фона указанной ячейки в HTML с помощью JavaScript?

2 голосов
/ 05 октября 2019

Я пытаюсь установить цвет фона ячейки на html-странице из простого javascript. Ниже мой 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'

Ожидаемый результат:

Мне нужноизменить цвет фона идентификатора диапазона "headerID1", а также следующего идентификатора диапазона.

Фактический результат:

Цвет не меняется, и вместо этого я получаю следующие ошибки: 

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.

Может кто-нибудь помочь мнеустранить эту ошибку?

Ответы [ 3 ]

2 голосов
/ 05 октября 2019

Помимо некоторых ошибок, связанных с недействительным HTML, как уже упоминалось другими, цвет вашего фона не изменится, потому что вы поместили <p> в <span>, что не имеет смысла, так как <p> является абзацем, а <span> - это стандартный встроенный контейнер для фразового содержимого. Это будет работать, хотя, если вы поместите <span> внутри <p>: 

<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 начинает выполняться, когда остальной документ неоказано еще. Вы можете попробовать:

  1. Поместить <script src ="Json_Development_Test.js"> в конец HTML

  2. Поместить эту строку 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';
});
0 голосов
/ 05 октября 2019

Проблема с этой строкой кода

document.getElementById('headerID1').style.background = 'blue'

. Вместо этого используйте 

document.getElementById('headerID1').bgColor='blue'

.

Кроме того, структура HTML также неверна.

0 голосов
/ 05 октября 2019

Ваш HTML неверен. При написании HTML вы можете использовать HTML validator .

Несколько проблем с вашим кодом:

  1. <head> должен идти сразу после тега <html>, и вы должны закрыть <head> перед открытием <body>.
  2. Удалить эту строку <div id ="test">
  3. Свойство, которое вы хотите в своем JS, равно backgroundColor, поэтому у вас будет: 
document.getElementById('headerID1').style.backgroundColor = 'blue';
...