この記事では、上下のテーブル行を実装するJSの方法について説明します。次のように、参照のために共有してください。
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <タイトル>テーブルロウ</head> <body> <body> <table> <tody> <td> 11 </td> <td> <a href = "javascript:void(0)" onclick = "moveup(this)"> move up </a> </td> <td> <a href = "javascript:void(0)" onclick = "moveown(this)" <td> 22 </td> <td> <a href = "javascript:void(0)" onclick = "moveup(this)"> move up </a> </td> <td> <a href = "javascript:void(0)" onclick = "moveown(this)" <td> 33 </td> <td> <a href = "javascript:void(0)" onclick = "moveup(this)"> move up </a> </td> <td> <a href = "javascript:void(0)" onclick = "moved(this)" <td> 44 </td> <td> <a href = "javascript:void(0)" onclick = "moveup(this)"> move up </a> </td> <td> <a href = "javascript:void(0)" onclick = "moved(this)" <td> 55 </td> <td> <a href = "javascript:void(0)" onclick = "moveup(this)"> move up </a> </td> <td> <a href = "javascript:void(0)" onclick = "movedown(this)" type = "text/javascript"> <! - function moveup(_a){var _row = _a.parentnode.parentnode; //最初の行でない場合は、前の行VAR _NODE = _ROW.PREVIORSSIBLINGに注文を交換します。 while(_node && _node.nodeType!= 1){_node = _node.previoussibling; } if(_node){swapnode(_row、_node); }} function movedown(_a){var _row = _a.parentnode.parentnode; //最後の行でない場合は、次の行VAR _NODE = _ROW.NEXTSIBLINGに注文を交換します。 while(_node && _node.nodeType!= 1){_node = _node.nextsibling; } if(_node){swapnode(_row、_node); }} function swapnode(node1、node2){//親ノードvar _parent = node1.parentnodeを取得します。 // 2つのノードの相対位置を取得var _t1 = node1.nextsibling; var _t2 = node2.nextsibling; // node2を元のnode1位置に挿入if(_t1)_parent.insertbefore(node2、_t1);その他_Parent.AppendChild(node2); // node1を元のnode2位置に挿入if(_t2)_parent.insertbefore(node1、_t2); else _Parent.AppendChild(node1);} //-> </script> </body> </html>実行効果のスクリーンショットは次のとおりです。
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください:「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptデータ構造とアルゴリズムスキルの概要」、「JavaScriptトラバーサルアルゴリズムとテクニックの要約」、「JSON操作の概要」の概要「JavaScriptトラバーサルアルゴリズムと技術の要約」 JavaScriptアニメーション効果とテクニック "、「JavaScriptエラーとデバッグテクニックの要約」および「JavaScriptの数学操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。