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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:45 PM

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

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

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

bbb 🎜>

td>

td>ccc

4 td>

;/td>

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