2011年05月09日

Table cellIndexプロパティ、セルのインデックス値の取得

スポンサード リンク

 セルのインデックス値の取得
object.cellIndex=値

道府県 県庁所在地 人口
北海道 札幌 550万人
大阪府 大阪 886万人
兵庫県 神戸 559万人

サンプルソース

<html>
 <head>
  <title>セルのインデックス値の取得</title>
<style type="text/css">
<!--
#myTBL{
   border-collapse: collapse; /*枠線の表示方法 collapse(重ねて表示 一本線)*/
   background-color : #fffff0;/*表の背景色*/
    color : black;      /*表の文字色*/
      }
#myTBL th{
   background-color : gold;/*見出しセルの背景色*/
    color : blue;          /*文字色*/
     padding : 10px;    /*セル内余白*/
      border : 1px solid navy; /*枠線borderプロパティ: 太さ 種類 色*/
     }
#myTBL td{
     padding : 10px;
      border : 1px solid navy;
     }
-->
</style>


<script type="text/javascript">
<!--
  function cellINX(){
   var ans = " ";
                // ID名がmyTBLであるテーブルのオブジェクトを取得。
   var Tbl=document.getElementById("myTBL");
                //rowsコレクションで行を参照する。 テーブル内のtrをループ。
    for(var i=0;i<
Tbl.rows.length;i++){ //length:コレクションの中にあるエレメントの数を返す。
               // tr内のtdをループする。セルへの参照はrowsのcellsコレクション。
     for(var j=0;j<
Tbl.rows[i].cells.length;j++){
       ans+="rows["+i+"].cells["+j+"].cellIndex = "+Tbl.rows[i].cells[j].cellIndex +"&nbsp;&nbsp;&nbsp;:"+Tbl.rows[i].cells[j].innerHTML+"<br>";
      }
    }
   document.getElementById("getRES").innerHTML=ans;
 }
//-->
</script>

</head>
<body>
<table id="myTBL">
  <tr><th>道府県</th><th>県庁所在地</th><th>人口</th></tr>
  <tr><td>北海道</td><td>札幌</td><td>550万人</td></tr>
  <tr><td>大阪府</td><td>大阪</td><td>886万人</td></tr>
  <tr><td>兵庫県</td><td>神戸</td><td>559万人</td></tr>
</table>
   <p><input type="button" value="セルのインデックス番号と値の取得" onclick="cellINX()" /></p>
   <div id="getRES"></div>
</body>
</html>

object.cellIndex=値
  Tbl.rows[i]rowsコレクションでテーブル内の行の位置を得ます。
'i'が 0 なら一行目、1なら二行目..........になります。
  Tbl.rows[i].cells[j]:rowsのcellsコレクションでテーブルの行内のセルの位置を得ます。
'j'が 0 ならi行目の一列目、1なら二列目..........になります。
  Tbl.rows[i].cells[j].cellIndexで指定したセルのインデックス番号を取得します。

指定した要素の内容の取り出し,書き換え。innerHTML
さくらのレンタルサーバ スタンダード
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。
テーブルの行の文字色,背景色を変えてハイライトします。
サーバーカウボーイ



posted by javaScript at 16:07 | 大阪 | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。