jQuery テーブルの行をボタン押下で並び替える

01. テーブルの行の並び替え

テーブルの行をボタン押下で並び替える

上ボタンを押すと、押下したボタンがある行が上に移動します。
下ボタンを押すと、押下したボタンがある行が下に移動します。
一番上または一番下のときは、アラートが表示され移動できません。

１テスト
２テスト
３テスト

サンプルのコード

上記サンプルのコードです。

<style>
  table {border-collapse: collapse;}
  table td {border: 1px solid}
</style>
<table style="width: 70%;max-width: 300px;">
  <tbody>
    <tr id="1">
      <td>１テスト</td>
      <td><input type="button" value="上" onclick="moveUp(this)">
        <input type="button" value="下" onclick="moveDown(this)"></td>
    </tr>
    <tr id="2">
      <td>２テスト</td>
      <td><input  type="button" value="上" onclick="moveUp(this)">
        <input type="button" value="下" onclick="moveDown(this)"></td>
    </tr>
    <tr id="3">
      <td>３テスト</td>
      <td><input type="button" value="上" onclick="moveUp(this)">
        <input type="button" value="下" onclick="moveDown(this)"></td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function moveUp(obj1) {
  // tr行を取得
  var line1 = obj1.parentNode.parentNode;
  // 一番上の行のときは終了する
  if(line1.previousElementSibling === null) {
    alert("１番上の行です");
    return;
  }
  //　行のIDを取得し移動
  a = line1.id;
  $("#" + a).insertBefore(line1.previousElementSibling);
}
function moveDown(obj1) {
  // tr行を取得
  var line1 = obj1.parentNode.parentNode;
  // 一番下の行のときは終了する
  if(line1.nextElementSibling === null) {
    alert("１番下の行です");
    return;
  }
  //　行のIDを取得し移動
  a = line1.id;
  $("#" + a).insertAfter(line1.nextElementSibling);
}
</script>

5～23行目は、htmlのテーブルです。
26行目からは上ボタンを押した時に実行されます。
28行目は、クリックした要素の親の親であるTRを取得します。
30行目のpreviousElementSiblingは、前の要素(兄の要素)を見て１番上の行であれば処理を終了します。
35行目は、TRのIDを取得します。
36行目は、jQueryのinsertBeforeで取得したTRを１つ前に移動します。

38行目からは下ボタンを押した時に実行されます。
40行目は上と同じくTRを取得します。
42行目のnextElementSibling は、次の要素(弟の要素)を見て一番下であれば処理を終了します。
48行目は、jQueryのinsertAfterで取得したTRを１つ後に移動します。