DOMを使用してテーブルの​​要素を変更する

Question

最近、DOMについて学習していて、数日間問題が発生しています。何らかの理由で、私はHTMLテーブルの内容を変更することはできません。私はw3の学校のHTMLを見ていて、DOMを使ってテーブルの要素を変更しています。ここで

は、テーブルのコードです：私がやろうとしてきた何

<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> 
     <tr class="row-even"> 
      <td>Illinois</td> 
      <td>Online system</td> 
      <td>201602</td> 
      <td>0100</td> 
      <td>5</td> 
      <td>Final</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

は、状態の名前とその値を変更しています。これを行うために、私は<td>要素にアクセスしようとしています。内容を変更するには

は、私は次のことを試してみました： セイは、例えば、「イリノイ州」を変更したい「グルジアは」私は私が間違っしかし、やっているかわからないです以下

document.getElementById("table.summaryTable.courseSummary.sm‌allFontTable").rows[‌2].cells; 
x[1].innerHTML = "Georgia"; 

をしようとしたためにコンソールは常に値がnullであることを示すエラーを返し続けます。

誰かがガイダンスを提供できますか？

Answer 1

document#querySelectorを使用してください。この場合、シンプルなセレクタは.row-evenの1つしかないので.row-even > td:first-childになる可能性があります。

どのように具体的になりますか？

.row-evenが複数ある場合は、tbody > tr:nth-child(1) > td:first-childを使用してください。

.row-evenのテーブルが複数ある場合は、#courseSummaryContainer .row-even > td:first-childというコンテナのIDまたはテーブル.courseSummary .row-even > td:first-childのクラスを追加できます。

var td = document.querySelector('.row-even > td:first-child'); 
 

 
td.innerText = 'Georgia';

<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>

Answer 2

あなたが機能を使用しようとしている場合は、DOMの右の要素を取得されていません：「getElementByIdを」を、あなたはそれをしたい要素のidを渡す必要があります

HTML：：

<div id="courseSummaryContainer" class="tab"> 
     <table id="myTable" cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province"> 
      //... Table content 
     </table> 
</div> 

JS：

のように、持っています

document.getElementById("myTable").rows[‌2].cells;