JavascriptでTABLEのcell属性を変更する：メモ

純粋に備忘録、メモです。

// セルサイズ指定
table.rows[r].cells[c].style.width       = String(size)+"px"; // pxを忘れないこと
// 中央寄せ
table.rows[r].cells[c].style.textAlign   = "center";
table.rows[r].cells[c].style.marginLeft  = "auto";     
table.rows[r].cells[c].style.marginRight = "auto";
// 右寄せ
table.rows[r].cells[c].style.textAlign   = "right";
table.rows[r].cells[c].style.marginLeft  = "auto";     
table.rows[r].cells[c].style.marginRight = "0px";

 JavascriptでTABLEのcellを中央寄せ、右寄せ、サイズ変更する

下のサンプルは、指定カラムのサイズを100または10に変え、 指定行の指定カラムを左寄せ、中央寄せ、右寄せします。
サイズ指定でpxを付け忘れないように注意が必要です。cellがINPUTなどの子持ち の場合は子供のサイズも変更する必要があります。残念ながら子持ちcellを 指定通りのサイズにすることにはまだ成功していません。
cssのmargin-leftはmarginLeftになります。

大型	→	小型
ワシ	→	スズメ
ペンギン	→	ツバメあややややや
ツル	→	チドリ
ハト	→

row: column:

<style type="text/css">
   table.t1{border:1px solid black ; border-collapse:collapse}
   table.t1 td{border:1px solid black}
   table.t1 th{border:1px solid black}
</style>
<script type="text/javascript">
function $E(id){return document.getElementById(id);}
function changeWidth(table,column,size){
   var rows= table.rows;
   for(var ridx=0;ridx<rows.length;++ridx){
      if( column >= rows[ridx].cells.length ) continue;
      var cell= rows[ridx].cells[column];
      cell.style.width= String(size)+"px";   // この"px"を付け忘れる
　    if( cell.firstChild != null ){         // cell内にINPUTなどを持つ場合
          cell.firstChild.style.width="98%"; // 本当は、タグとtypeを見て個別対処
          // var tagName  = row.cells[idx2].firstChild.tagName;
          // var sub_type = row.cells[idx2].firstChild.getAttribute("type");
          }
       }
   }
function center(table,row,column){
   var rows= table.rows;
   if( row    >= rows.length ) return;
   if( column >= rows[row].cells.length ) return;
   var cell= rows[row].cells[column];
   cell.style.textAlign   = "center";
   cell.style.marginLeft  = "auto";     
   cell.style.marginRight = "auto";
   }
function right(table,row,column){
   var rows= table.rows;
   if( row    >= rows.length ) return;
   if( column >= rows[row].cells.length ) return;
   var cell= rows[row].cells[column];
   cell.style.textAlign   = "right";
   cell.style.marginLeft  = "auto";     
   cell.style.marginRight = "0px";
   }
function left(table,row,column){
   var rows= table.rows;
   if( row    >= rows.length ) return;
   if( column >= rows[row].cells.length ) return;
   var cell= rows[row].cells[column];
   cell.style.textAlign   = "left";
   cell.style.marginLeft  = "0px";     
   cell.style.marginRight = "auto";
   }
</script>
<table class="t1" id="table1">
<tr style="background:#000044;color:#FFFFFF">
  <th>大型</th><th width="60">→</th>
  <th>小型</th>
</tr>
<tr> <td>ワシ</td>     <td>→</td> <td>スズメ</td> </tr>
<tr> <td>ペンギン</td> <td>→</td> <td>ツバメ</td> </tr>
<tr> <td>ツル</td>     <td>→</td> <td>チドリ</td> </tr>
<tr> <td>ハト</td>     <td>→</td> <td>メジロ</td> </tr>
</table><br>
row:<input type="text" value="1" style="width:2em" id="r" />
column:<input type="text" value="1" style="width:2em" id="c" /><br>
<input type="button" value="changeWidth(c,100)"
       onClick="changeWidth($E('table1'),$E('c').value,100);"/>
<input type="button" value="changeWidth(c,10)"
       onClick="changeWidth($E('table1'),$E('c').value,10);"/><br>
<input type="button" value="left(r,c)"
       onClick="left($E('table1'),$E('r').value,$E('c').value);"/>
<input type="button" value="center(r,c)"
       onClick="center($E('table1'),$E('r').value,$E('c').value);"/>
<input type="button" value="right(r,c)"
       onClick="right($E('table1'),$E('r').value,$E('c').value);"/>

 JavascriptでTABLEのcellサイズを変え、中身のサイズもそれに合わせる

TABLEのサイズは基本的にセルサイズに中身を合わせるのではなく 中身のサイズにセルサイズを合わせる仕様となっています。

IEの場合はtable-layout:fixedとすることで、内部の要素によってセル サイズが変わらないようにできます。

cell内の子要素に対して、再帰的にサイズを指定する例を示します。
<td>の中に単純な文字と<span>に入れた文字、および <INPUT type="text">を入れてあります。
white-space:nowarpは各要素に与えています。当然<td>にも 与えているのですが有効とはならず、<span>に入れたもの に対し<span>に指定することにより有効になるようです。
cellと同じサイズを指定すると表示がくずれますので、ここでは幅、 高さとも2ピクセル小さくしています。
テーブル全体の横幅も指定しています。

理由は不明ですが、table-layoutをスタティックにcssで指定すると デザインが崩れましたので、ここではサイズ変更時に指定しています。

　　　　　　 　　　　 　　　　　　

大型	→	小型
ワシ	→	スズメ
ペンギン	→	ツバメあややややや
ペンギン	→	チドリ
ツル	→

<style type="text/css">
   table.t2{border:1px solid black ; border-collapse:collapse;}
   table.t2 td{border:1px solid black}
   table.t2 th{border:1px solid black}
</style>
<script type="text/javascript">
function $E(id){return document.getElementById(id);}
function setObjSize(obj,width,height){
   if( obj.style != undefined ){
      obj.style.whiteSpace="nowrap";
      obj.style.width = String(width)+"px";
      obj.style.height= String(height)+"px";
      }
   if( obj.firstChild!=null ) setObjSize(obj.firstChild,width-2,height-2);
   }
function setCellSizes(table,column,width,height){
   var rows= table.rows;
   for(var ridx=0;ridx<rows.length;++ridx){
      if( column >= rows[ridx].cells.length ) continue;
      setObjSize(rows[ridx].cells[column],width,height);
      }
   }
function setTableSize(table,columnsWidth,height){
   table.style.tableLayout="fixed";
   var total_size=0;
   for(var idx=0;idx<columnsWidth.length;++idx) total_size += columnsWidth[idx];
   table.style.width= String(total_size)+"px";
   for(var idx=0;idx<columnsWidth.length;++idx) {
       setCellSizes(table,idx,columnsWidth[idx],height);
       }
   }
</script>
<table class="t2" id="table2">
<tr style="background:#000044;color:#FFFFFF">
  <th>大型</th><th width="60">→</th>
  <th>小型</th>
</tr>
<tr> <td>ワシ</td>     　　　　　　<td>→</td> <td><span class=x>スズメ</span></td> </tr>
<tr> <td><span>ペンギン</span></td><td>→</td> <td><span class=x>ツバメあややややや</span></td> </tr>
<tr> <td>ペンギン</td>     　　　　<td>→</td> <td><span class=x>チドリ</span></td> </tr>
<tr> <td>ツル</td>     　　　　　　<td>→</td> <td><input type="text" value="メジロ"></input></td> </tr>
</table><br>
<input type="button" value="([50,30,150],25)"
       onClick="setTableSize($E('table2'),[50,30,150],25);"/>
<input type="button" value="[100,150,50],50)"
       onClick="setTableSize($E('table2'),[100,150,50],22);"/>
<input type="button" value="([80,120,200],35)"
       onClick="setTableSize($E('table2'),[80,120,200],30);"/>
<input type="button" value="([10,20,30],10)"
       onClick="setTableSize($E('table2'),[10,20,30],10);"/>