table

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

セルの取得

table=document.getElementById('id') // tableの取得
table.rows // 行の一覧
table.rows.length // 行数の取得
table.rows[行番号] // 行の取得
table.rows[行番号].cells // 行に含まれるセルの一覧
table.rows[行番号].cells.length //行に含まれるセルの個数
table.rows[行番号].cells[列番号] //セルの取得
以下のボタンをクリックするとセルの値を取得し下に表示します。
tableオブジェクト(HTMLTableElement)のrowsプロパティで行の一覧(HTMLCollection)を取得できます。
行数はrowsのlengthプロパティで取得できます。
各行はrows[行番号](HTMLTableRowElement)でアクセスできます。
セルはrows[行番号].cellsで行に含まれるセルの一覧(HTMLCollection)を取得できます。
列数はcellsのlengthプロパティで取得できます。
各セルはcells[列番号](HTMLTable​Cell​Element)で取得できます。
セル(HTMLTable​Cell​Element)の値はinnerTextで取得変更できます。
セルの指定を一括して記述するとtable.rows[行番号].cells[列番号]となります。
style.backgroundColorによりセルの背景色を変更しています。
789
456
123
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="hascroll"><table id="id1">
    <tbody><tr><td>7</td><td>8</td><td>9</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody></table></div>
  <span id="id2"></span>
  <script type="text/javascript">
  function test1(){
    var tbl=document.getElementById('id1');
    var c=[ "red","blue","magenta","green","yellow","cyan" ];
    var o=document.getElementById('id2');
    var row=tbl.rows;
    var n,i;
    var t="";
    for(n=0;n<row.length;n++){
      var cell=row[n].cells;
      for(i=0;i<cell.length;i++){
        t=t+cell[i].innerText+" ";
        cell[i].style.backgroundColor=c[(n*3+i)%6];
      }
      t=t+"<br />";
    }
    o.innerHTML=t;
  }
  </script>
  <form name="test1Form">
    <input type="button" value="セルの取得" onclick="test1()" />
  </form>
</body>
</html>

行・セルの追加・削除

table.insertRows(行番号) // 行の挿入
row.insertCell(列番号) // セルの挿入
table.deleteRow(行番号) // 行の削除
row.deleteCell(列番号) // セルの削除
行の追加ボタンをクリックすると一番下に1行追加します。
列の追加ボタンをクリックすると一番右の横に列を追加します。
行の削除ボタンをクリックすると一番下の行を削除します。
列の削除ボタンをクリックすると一番右の横の列を削除します。
列の結合ボタンをクリックすると一番左上のセルと右のセルを結合します。
行の追加はtableオブジェクトのinsertRows(行番号)で追加できます。行番号に-1を指定すると最後尾に行が追加されます。
セルの追加は行のオブジェクトに対してinsertCell(列番号)で追加できます。列番号に-1を追加すると最後尾にセルが追加されます。 行の削除はtableオブジェクトのdeleteRow(行番号)で削除できます。
セルの削除は行のオブジェクトに対してdeleteCell(列番号)で削除できます。列番号に-1を指定すると一番右のセルが削除されます。 セルの結合はdeleteCellで1列目のセルを削除してからcolsSpanに2を指定して結合しています。
123
234
345
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

  <div class="hascroll"><table id="id3">
    <tbody><tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>3</td><td>4</td><td>5</td></tr>
  </tbody></table></div>
  <script type="text/javascript">
  function test3(){
    var tbl=document.getElementById('id3');
    var ct=[ "red","blue","magenta","green","yellow","cyan" ];
    var row=tbl.insertRow(-1);
    for(var i=0;i<tbl.rows[0].cells.length;i++){
      var c=row.insertCell(-1);
      n=tbl.rows.length+i;
      c.innerText=n;
      c.style.backgroundColor=ct[n % 6];
    }
  }
  function test4(){
    var tbl=document.getElementById('id3');
    var ct=[ "red","blue","magenta","green","yellow","cyan" ];
    var row=tbl.rows;
    var i;
    for(var n=0;n<row.length;n++){
      var c=row[n].insertCell(-1);
      i=n+row[n].cells.length;
      c.innerText=i;
      c.style.backgroundColor=ct[i % 6];
    }
  }
  function test5(){
    var tbl=document.getElementById('id3');
    var row=tbl.rows;
    if(1<row.length)
      tbl.deleteRow(row.length-1);
  }
  function test6(){
    var tbl=document.getElementById('id3');
    var row=tbl.rows;
    var n,i;
    if(1<row[0].cells.length){
      for(n=0;n<row.length;n++){
        row[n].deleteCell(-1);
      }
    }
  }
  function test7(){
    var tbl=document.getElementById('id3');
    var row=tbl.rows;
    if(2<row[0].cells.length){
      row[0].deleteCell(1);
      row[0].cells[0].colSpan=2;
    }
  }
  </script>
  <form name="test3Form">
    <input type="button" value="行の追加" onclick="test3()" />
    <input type="button" value="列の追加" onclick="test4()" />
    <input type="button" value="行の削除" onclick="test5()" />
    <input type="button" value="列の削除" onclick="test6()" />
    <input type="button" value="列の結合" onclick="test7()" />
  </form>
</body>
</html>

表のセルにカーソルがのると行列番号及びセルの内容を表示する

td要素にonmouseoverイベントに関数を登録することによりセルの上にカーソルがのると行列番号及びセルの内容を表の上に表示します。
行番号は、セルの親がtr要素なのでtr要素のrowIndexプロパティで取得できます。
列番号は、セルのcellIndexプロパティで取得できます。
セルの中身はinnerTextプロパティで取得できます。
イベントの登録はイベントの追加ボタンをクリックすることにより登録されます。
inputtablespan
divinnerHTMLinnerText
onmouseoverrowscells
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id5"></span>
  <div class="hascroll"><table id="id4">
    <tbody><tr><td>input</td><td>table</td><td>span</td></tr>
    <tr><td>div</td><td>innerHTML</td><td>innerText</td></tr>
    <tr><td>onmouseover</td><td>rows</td><td>cells</td></tr>
  </tbody></table></div>
  <script type="text/javascript">

  function test9(cell){
    var rnum=cell.parentNode.rowIndex;
    var cnum=cell.cellIndex;
    var o=document.getElementById('id5');
    o.innerText=rnum+"行"+cnum+"列 "+cell.innerText;
  }

  function test8(){
    var tbl=document.getElementById('id4');
    var x,y;
    var row,cell;
    row=tbl.rows;
    for(y=0;y<row.length;y++){
      cell=row[y].cells;
      for(x=0;x<cell.length;x++){
        cell[x].onmouseover=function(){
          test9(this);
        }
      }
    }
  }
  </script>
  <form name="test4Form">
    <input type="button" value="イベントの追加" onclick="test8()" />
  </form>
</body>
</html>