〜引用地元jqueryのを注意してください
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタのcharset = "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1、最大規模= 1">
<タイトル> jQueryの实现表格行上移下移和置顶</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
.demo {幅：600PX。マージン：60PX自動10pxの自動; フォントサイズ：16pxに}
.table {ボーダー崩壊：崩壊重要;幅：100％;最大幅：100％;マージン底：20ピクセル;}
.table TD、.table番目{背景色：#FFF ！重要;}
.table-ボーダー番目、.table-ボーダーTD {ボーダー：1ピクセル固体#ddd重要;}
.tableのTR TD {パディング：8px;行の高さ：1.42857143;垂直整列：中央;}
.table TR：ホバー{背景色：＃1 f5f5f5;}
</スタイル>
ます。<script type = "text / javascriptの" SRC = "JS / jqueryの-2.1.1.min.js"> </ SCRIPT>
<SCRIPT>
$（関数（）{
//上移
するvar $アップ= $（」。アップ"）
$ up.click（関数（）{
はconsole.log（$（この）.parents（" TR "）インデックス（））;
VAR $ TR = $（この）.parents（" TR "）;
場合（$ tr.index（）！= 0）{
$ tr.prev（）の前に（$ TR）;
}
}）;
//下移
VAR $ダウン= $（ "ダウン"）;
VAR LEN = $ダウン.LENGTH;
$のdown.click（関数（）{
VAR $ TR = $（この）.parents（ "TR"）;
（$ tr.index（）の場合= LEN - 1）{！
$ tr.next（）。後（$ trの）;
}
}）;
//置顶
するvar $トップ= $（） "トップ。";
$トップ。（関数（）{クリック
VAR $ TR = $（この）.parents（ "TR"）;
$（ "テーブル"）先頭に追加（$のTR）。
}）;
}）;
</ SCRIPT>
</ head>
<body>
<DIV ID = "メイン">
<DIV CLASS = "デモ">
<テーブルクラス= "テーブル">
<TR>
<TD>第一行文字</ TD>
< TD> 2018年1月1日</ TD>
<TD> <a href="#" class="up">上移</a>の<a href="#" class="down">下移</ > <a href="#" class="top">置顶</a>の</ TD>
</ TR>
<TR>
<TD>第二行文字</ TD>
<TD> 2018年1月2日</ TD>
<TD> <a href="#" class="up">上移</a>の<のhref = "＃"
</ TR>
<TR>
<TD>第四行文字</ TD>
<TD> 2018年1月4日</ TD>
<TD> <a href="#" class="up">上移</ A> <a href="#" class="down">下移</a>の<a href="#" class="top">置顶</a>の</ TD>
</ TR>
</テーブル>
</ div>
</ div>
</ BODY>
</ HTML>
非常に詳細では、単に共有する〜
より専門的なフロントエンドの知識、作る [2048] APE www.mk2048.comを