Как изменить значения в таблице с помощью DOM?

Question

При использовании DOM для редактирования таблицы, как вы отредактируете содержимое указанной ячейки ?
Я пробовал искать различные способы на w3Schools, однако консоль продолжает давать мне это сообщение, указав, что значения равны нулю. Может ли кто-нибудь помочь?

Это HTML для таблицы я пытаюсь изменить:

<div id="courseSummaryContainer" class="tab"> 
    <table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province"> 
     <thead><tr> 
      <th>Name</th> 
      <th>Description</th> 
      <th>Date of entry</th> 
      <th>Rating</th> 
      <th>Grade</th> 
      <th>Submission entry type</th> 
     </tr></thead> 
     <tbody> 
     <tr class="row-even"> 
      <td>Illinois</td> 
      <td>Online system</td> 
      <td>201602</td> 
      <td>0100</td> 
      <td>5</td> 
      <td>Final</td> 
     </tr> 
     <tr class="row-odd"> 
      <td>Alabama</td> 
      <td>Regional area health</td> 
      <td>201606</td> 
      <td>0100</td> 
      <td>7</td> 
      <td>Final</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Я пробовал:

document.getElementById("table.summaryTable.courseSummary.sm‌​allFontTable").rows[‌​0].cells; x[0].innerHTML = "NEW CONTENT"; 

, но это не сработало.

Answer 1

Используйте идентификатор для таблицы и попробуйте

<table cellspacing="0" id="courseSummaryContainer" class="summaryTable courseSummary smallFontTable" summary="Health Care by province"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Description</th> 
 
       <th>Date of entry</th> 
 
       <th>Rating</th> 
 
       <th>Grade</th> 
 
       <th>Submission entry type</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="row-even"> 
 
       <td>Illinois</td> 
 
       <td>Online system</td> 
 
       <td>201602</td> 
 
       <td>0100</td> 
 
       <td>5</td> 
 
       <td>Final</td> 
 
      </tr> 
 
      <tr class="row-odd"> 
 
       <td>Alabama</td> 
 
       <td>Regional area health</td> 
 
       <td>201606</td> 
 
       <td>0100</td> 
 
       <td>7</td> 
 
       <td>Final</td> 
 
       </tr> 
 
      </tbody> 
 
    </table> 
 

 

 
<script> 
 

 
var x = document.getElementById("courseSummaryContainer").rows[0].cells; 
 
x[0].innerHTML = "NEW CONTENT"; 
 

 
</script>

Answer 2

table.summaryTable.courseSummary.sm‌​allFontTable не является ID для таблицы, так getElementById не будет работать.

Эта таблица не имеет идентификатора, но имеет 3 класса CSS. Вот a tutorial on the difference.
См. Также, the CSS Selectors reference at MDN.

Вы не можете использовать getElementById, но можете использовать document.querySelector^Doc.

Код, как в фрагменте ниже, выбирает первую таблицу с классом courseSummary, который содержится в разделе courseSummaryContainer div.

И, наконец, не используйте innerHTML. Bad things come to those who do.

var csTable = document.querySelector ("#courseSummaryContainer table.courseSummary"); 
 
if (csTable) { 
 
    csTable.rows[0].cells[0].textContent = "NEW CONTENT"; 
 
}

td, th { 
 
    border: 1px solid gray; 
 
    padding: 0.2ex 1ex; 
 
} 
 
table { border-collapse: collapse;}

<div id="courseSummaryContainer" class="tab"> 
 
    <table class="summaryTable courseSummary smallFontTable"> 
 
     <thead><tr> 
 
      <th>Name</th> 
 
      <th>Description</th> 
 
      <th>Date of entry</th> 
 
      <th>Rating</th> 
 
      <th>Grade</th> 
 
     </tr></thead> 
 
     <tbody> 
 
     <tr class="row-even"> 
 
      <td>Illinois</td> 
 
      <td>Online system</td> 
 
      <td>201602</td> 
 
      <td>0100</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr class="row-odd"> 
 
      <td>Alabama</td> 
 
      <td>Regional area health</td> 
 
      <td>201606</td> 
 
      <td>0100</td> 
 
      <td>7</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>