検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で簡単なテーブルの並べ替えとテーブル操作を実装する演習_JavaScript スキル

JavaScript で簡単なテーブルの並べ替えとテーブル操作を実装する演習_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 17:45:021068ブラウズ

この例では、主に次のようなテーブル操作を練習しました: tBodies、行、セル、配列のソート方法: sort
まず、コード:

Copy code コードは次のとおりです。


メタ charset="utf-8">
テーブル ソート
="400" border="1">

bbb 🎜>


td>


td>ccc

4 td>


;/td>


><script> <br>window.onload = function () { <br>var oTable = document.getElementById('tableTest'); <br>var oTbody = oTable.tBodies[0]; document.getElementById('sort'); <br>var arr = [];//各 A tr を格納するために使用されます <br>var isAsc = true; // 昇順または降順を決定するために使用されます <br>oBtn.onclick = function () { <br>for (var i = 0; i <otbody.rows.length i>arr[i] = oTbody.rows[i];//ここで、各 tr は次のように格納されます。ソートの基礎ではなく、配列 (ここでは cell[0].innerHTML) <br>} <br> //配列は、cells[0].innerHTML に従ってソートされます <br>arr.sort(function (td1 , td2){ <br>if(isAsc) { <br>return parseInt(td1.cells[0].innerHTML ) - parseInt(td2.cells[0].innerHTML); else { <br>return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML); <br>} <br>}); // ソートされた tr を tbody <br>for( var j =0; j <br>oTbody.appendChild(arr[ j]) <br>//昇順、降順を判定 <br>isAsc = !isAsc ; <br>} <br>} <br></script>



🎜>通常の DOM を操作する場合、getElementsByTagName、getElementById などを通じて関連するノードを取得できることは誰もが知っています。
テーブル内 もちろん、このメソッドも実装できます
明らかに、この操作は非常に面倒です
したがって、別のメソッドと属性のセットを使用してテーブルを操作できます。
その前に、Dongdong について話しましょう:
多くの人はテーブルを記述するときに次のように直接記述すると思います。




コードをコピーします


コードは次のとおりです:










firebug でコードをチェックすると、余分な tbody があることがわかりますが、ソース コードは明らかに存在しません。
これはなぜですか? ！
実際、table の実際の構造は次のとおりです: table には次のものも含まれます: thead、tbody、tfoot、tbody は複数にすることができます
トピックに戻る:
JavaScript の table について要素の属性とメソッド:
caption: 要素の HTMLCollection です
tFoot: < 要素へのポインタを保持します;tfoot> ; 要素へのポインタ (存在する場合)
tHead: 要素 (存在する場合) へのポインタを保持します
rows: テーブル内のすべての行の HTMLCollection です
createTHead() : < thead> 要素を作成し、テーブルに配置し、参照を返します。
createTFoot(): 要素を作成し、テーブルに配置し、参照を返します。
createCaption():
deleteTHead(): 要素を削除します。
deleteTFoot():
deleteCaption( ):
要素へのポインタを保持します (存在する場合)
tBodies: 要素を削除します。
deleteRow(pos): 指定された位置の行を削除します。
insertRow(pos): 行コレクションの指定された位置に行を挿入します。
属性および tbody に関連するメソッド :
rows : tbody 内のすべての行を保持する HTMLCollection
deleteRow(pos): 指定された位置の行を削除します
insertRow(pos): 指定された位置に行を挿入します行コレクション内の位置を取得し、新しく挿入された行への参照を返します
tr 属性とメソッドについて:
cells: tr のすべての td (セル) を保存する HTMLCollection
deleteCell(pos ): 指定した位置のセルを削除します
insetCell(pos ): セル コレクション内の指定した位置にセルを挿入し、セルへの参照を返します
OK、それだけです………………
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript の遅延読み込みは test_javascript スキルを延期します次の記事：JavaScript の遅延読み込みは test_javascript スキルを延期します

関連記事

続きを見る