表の削除
tableのtbody要素の行を削除します。
<![CDATA[
function clearTbody() {
var tbodies = document.getElementsByTagName("tbody");
for (var i = 0; i < tbodies.length; i++) {
while (tbodies[i].rows.length > 0) {
tbodies[i].deleteRow(0);
}
}
}
<table>
<tbody>
<tr>
<td>・・・</td>
<td>・・・</td>
・
・
</tr>
</tbody>
</table>
]]>
表のソート
表中のデータをソートして表を書き換え
(1)ページのロード時
配列rowに各行の要素を代入。
(2)▲、▼のクリック時
指定された列の値の順に配列rowをソート。
配列rowをソート後にtbody要素内の行を全て削除し、ソートされた配列rowを順番に追加することで、表のソートを行う。
<![CDATA[
<style type="text/css">
th span { cursor: pointer; }
</style>
<script type="text/javascript">
var cell = new Array();
var row = new Array();
var i;
var n_rows;
</script>
]]>
(ページのロード時に呼び出される関数)
<![CDATA[
function init(){
// tr要素
var tr = document.getElementsByTagName('tr');
// 見出し行を除く行の数
n_rows = tr.length-1;
// 見出し行を除くテーブルの行を配列rowに代入
for( i=0; i<n_rows; i++ ){ row[i] = tr[i+1]; } } ]]>
(表のソート)
<![CDATA[
// col→列の番号、asc→昇順:true 降順:false
function sortTable(col, asc){
// ソート対象の列を配列cellに代入
for( i=0; i<n_rows; i++ ){ cell[i] = row[i].childNodes[col].firstChild.nodeValue; } // 配列cellの順に配列rowをソート sortData(asc); // テーブルの書き換え replaceTable(); } ]]>
(配列rowのソート)
<![CDATA[
// 配列cellの順に配列rowをソート
function sortData(asc){
var tmp;
var finish_sort = false;// 交換をしなければソート終了
while(!finish_sort){
finish_sort = true;
for( i=0; i<n_rows-1; i++ ){ if( (asc && cell[i]>cell[i+1]) || // 昇順
(!asc && cell[i]<cell[i+1]) ){ // 降順 // cellの交換 tmp = cell[i]; cell[i] = cell[i+1]; cell[i+1] = tmp; // rowの交換 tmp = row[i]; row[i] = row[i+1]; row[i+1] = tmp; // 交換をしたのでソート終了ではない finish_sort = false; } } } } ]]>
(テーブルの置き換え)
<![CDATA[
<function replaceTable(){ // tbody要素 var tbdy = document.getElementById('tbdy'); // tbody要素の行を削除 for( i=0; i<n_rows; i++ ){ tbdy.removeChild(row[i]); } // tbody要素の行を追加 for( i=0; i<n_rows; i++ ){ tbdy.appendChild(row[i]); } } ]]>
(表)
<![CDATA[
<table border="1">
<thead>
<tr>
<th>
氏名
</th>
<th>
<span onclick="sortTable(1,true)">▲</span>
ふりがな
<span onclick="sortTable(1,false)">▼</span>
</th>
<th>
<span onclick="sortTable(2,true)">▲</span>
会員番号
<span onclick="sortTable(2,false)">▼</span>
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr><td>原太</td><td>はらふとし</td><td>7845783</td></tr>
<tr><td>馬場一</td><td>ばばはじめ</td><td>1536853</td></tr>
<tr><td>林茂</td><td>はやししげる</td><td>8562834</td></tr>
<tr><td>松武子</td><td>まつたけこ</td><td>4684568</td></tr>
<tr><td>岡登</td><td>おかのぼる</td><td>6453823</td></tr>
</tbody>
</table>
]]>
配列のデータをソートして動的に表を生成
テーブルデータをオブジェクトデータ配列に格納し、それを元に表を動的に生成。
<![CDATA[
<style type="text/css">
th span { cursor: pointer; }
</style>
<script type="text/javascript">
// テーブルデータ
var jsData = new Array();
jsData[0] = {name:"原太", kana:"はらふとし", id:7845783, birth:new Date("1965/6/7")};
jsData[1] = {name:"馬場一", kana:"ばばはじめ", id:1536853, birth:new Date("1954/4/5")};
jsData[2] = {name:"林茂", kana:"はやししげる", id:8562834, birth:new Date("1970/3/5")};
jsData[3] = {name:"松武子", kana:"まつたけこ", id:4684568, birth:new Date("1968/8/10")};
jsData[4] = {name:"岡登", kana:"おかのぼる", id:6453823, birth:new Date("1975/7/9")};
// 表の作成
function drawTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
// 既存の行を削除
clearTable(tbody);
// データソースを走査する
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].name;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].kana;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].id;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].birth.toLocaleDateString();
td = tr.insertCell(tr.cells.length);
}
}
// 既存の行を削除
function clearTable(tbody) {
while (tbody.rows.length > 0) {
tbody.deleteRow(0);
}
}
// ソート関数のディスパッチャ (テーブル別リンクから呼び出される)
function sortTable(item) {
switch (item) {
case "kanaA" :
jsData.sort(sortByKanaAsc);
break;
case "kanaD" :
jsData.sort(sortByKanaDsc);
break;
case "idA" :
jsData.sort(sortByIdAsc);
break;
case "idD" :
jsData.sort(sortByIdDsc);
break;
case "birthA" :
jsData.sort(sortByBirthAsc);
break;
case "birthD" :
jsData.sort(sortByBirthDsc);
break;
}
drawTable("matchData")
return false
}
// ソート関数 (sortTable()から呼び出される)
function sortByKanaAsc(a, b) {
return ((a.kana < b.kana) ? -1 : ((a.kana > b.kana) ? 1 : 0));
}
function sortByKanaDsc(a, b) {
return ((b.kana < a.kana) ? -1 : ((b.kana > a.kana) ? 1 : 0));
}
function sortByIdAsc(a, b) {
return a.id - b.id;
}
function sortByIdDsc(a, b) {
return b.id - a.id;
}
function sortByBirthAsc(a, b) {
return a.birth - b.birth;
}
function sortByBirthDsc(a, b) {
return b.birth - a.birth;
}
</script>
<body onload="drawTable('matchData')">
<table border="1" id="employee">
<thead>
<tr>
<th>
氏名
</th>
<th>
<span onclick="sortTable('kanaA')">▲</span>
ふりがな
<span onclick="sortTable('kanaD')">▼</span>
</th>
<th>
<span onclick="sortTable('idA')">▲</span>
会員番号
<span onclick="sortTable('idD')">▼</span>
</th>
<th>
<span onclick="sortTable('birthA')">▲</span>
生年月日
<span onclick="sortTable('birthD')">▼</span>
</th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table>
]]>
行のハイライト
テーブルのマウスポインタを当てた行をハイライトするには、tr要素に対してonmouseoverイベントハンドラを定義し、Element.style.backgroundColorを設定します。
マウスポインタをはずした時に元に戻るようにonmouseoutイベントハンドラも定義します。
<![CDATA[
function hightlight(target, color){
target.style.backgroundColor = color;
}
]]>
<![CDATA[
<tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" >
]]>
列のハイライト
テーブルのマウスポインタを当てた列をハイライトするには、table要素にonmouseoverベントハンドラを定義し、イベントのあったtd要素を求めます。
(1)イベントのあった要素を取得
targetプロパティで取得・・・InternetExploreではsrcElementプロパティ。
<![CDATA[
var elem = (evt.target) ? evt.target : evt.srcElemenmt;
]]>
(2)イベントのあったtd要素を判別したら、同じ行のtd要素をElem.parentNode.childNodesで求める。
(3)同じ列のtd要素の背景色を設定する。
<![CDATA[
function hightlight(evt,color){
// W3C DOMとIEの両方のイベントオブジェクトに対応
evt = (evt) ? evt : ((event) ? event : null);
if( evt ) {
// イベントのあった要素(td)を求める
var elem = (evt.target) ? evt.target : evt.srcElement;
if( elem ) {
// イベントのあった要素と同じ行の要素
var sisters = elem.parentNode.childNodes;
// イベントのあった列の番号noを求める
var no = 0;
while(no<sisters.length && sisters[no]!=elem){ no++; } // 全ての行(tr)を求める var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++){ // no番目の列の要素の背景色を指定 rows[i].childNodes[no].style.backgroundColor = color; } } } } ]]>
(背景色の設定)
<![CDATA[
// すべてのセルの背景色を設定する
function clearBgColor(color){
var cells = document.getElementsByTagName("td");
for(var i=0; i<cells.length; i++){ cells[i].style.backgroundColor = color; } } ]]>
<![CDATA[
<tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" >
]]>
