DOMを使用してテーブルの値を変更するにはどうすればよいですか？

Question

DOMを使用して表を編集する場合、指定したセルの の内容をどのように編集しますか？
私はw3Schoolsでさまざまな方法を調べてみましたが、コンソールは値がnullであることを示すこのメッセージを続けています。誰かが助けることができますか？

これは私が編集しようとしているテーブルの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

使用テーブルのidとしてみてください

<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は動作しません。

このテーブルにはIDはありませんが、3つのCSSクラスがあります。ここにはa tutorial on the differenceがあります。
また、the CSS Selectors reference at MDNを参照してください。

getElementByIdは使用できませんが、document.querySelector^Docを使用できます。

以下のスニペットのコードは、courseSummaryContainer divに含まれるクラスcourseSummaryの最初のテーブルを選択します。

最後に、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>