javascript spのhtmlテーブル

Question

基本的に、私は最近Javascriptで作業を始めた初心者です。私はコードを単純化したいと思います。どのように私はこれを簡単にすることができますか？ idを変更したい場合は、1つのコードで宣言するには長すぎるため、どのようにループを適用しますか？手動でhtmlで変更するのではなく、Javascriptを使用してHTMLの値を変更しますか？

<table border="2" cellpadding="4"> 
    <tbody> 
     <tr> 
      <td id="cell1"> one </td> 
      <td id="cell2"> two </td> 
      <td id="cell3"> three </td> 
     </tr> 
     <tr> 
      <td id="cell4"> four </td> 
      <td id="cell5"> five </td> 
      <td id="cell6"> six </td> 
     </tr> 
    </tbody> 
</table> 

document.getElementById("cell1").innerHTML="1";          
document.getElementById("cell2").innerHTML="2";          
document.getElementById("cell3").innerHTML="3";          
document.getElementById("cell4").innerHTML="4";          
document.getElementById("cell5").innerHTML="5";          
document.getElementById("cell6").innerHTML="6"; 

Answer 1

私は助けるが、あなたとあなたがこのサイトhttps://www.w3schools.com/js/ではJavaScriptを学ぶ開始することができますが、非常に有用であることを願っていfor loop

var items = document.getElementsByTagName('td'); 
 
for (var i = 0, j = 1; i <= items.length - 1; i++, j++) { 
 
    items[i].innerHTML = j; 
 
}

<table border="2" cellpadding="4"> 
 
    <tbody> 
 
    <tr> 
 
     <td id="cell1"> one </td> 
 
     <td id="cell2"> two </td> 
 
     <td id="cell3"> three </td> 
 
    </tr> 
 
    <tr> 
 
     <td id="cell4"> four </td> 
 
     <td id="cell5"> five </td> 
 
     <td id="cell6"> six </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

を使用してこのコードを試してみてください。

var d = document; 
var trs = d.getElementsByTagName("tr"); 
console.log(trs); 
var count = 1; 
for(var i=0 ; i<trs.length ; i++){ 
    tds = trs[i].getElementsByTagName("td"); 
    for(var j=0 ; j<tds.length ; j++){ 
     tds[j].innerHTML = count; 
     count++; 
    } 
    console.log(trs[i]); 
}