この記事では、上下のテーブル行を実装する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プログラミングに役立つことを願っています。