テーブルの行を選択し、上下のボタンを押すことで、テーブルの選択行の並びを上下に入れ替えできるようにしたいと思っています。

Question

テーブルの行を選択し、上下のボタンを押すことで、テーブルの選択行の並びを上下に入れ替えできるようにしたいと思っています。

テーブルをクリックすることで、その行のコード列の値がテキストボックス#codeに入るようにし、
その値をもとにtdの中身を検索して、#codeの値のある行を上下にするようにしました。

▼上ボタンを押したときの関数です▼

$("#up").click(function() {
var code = $('input#code').val();
var tr = "";
$("td:contains(" + code + ")").each(function(index) {
if ($(this).text() == code) {
tr = $(this).parent();
}
});

// 一個前のtrの前に置く
if ($(tr).prev("tr")) { 
	$(tr).insertBefore($(tr).prev("tr")[0]);
}

});

コード ｜ 価 格 ｜
――――――――――――
１ ｜ ０ ｜
――――――――――――
２ ｜ ３０００ ｜
――――――――――――
３ ｜ ０ ｜
――――――――――――
４ ｜ ５００ ｜
――――――――――――
９９９ ｜ ４５０ ｜

テーブルは上記のようになっていますが、
コード１、２の行は選択後、上下ボタンを押すことで、思い通りの入れ替えができるようになりました。

ですが、コード３以降の行が思い通りの動きをせず、
・３の行を選択して上下ボタンを押しても４の行が動く
・４の行を選択して上下ボタンを押しても３の行が動く
・９９９の行は選択後上下ボタンを押しても動かない

となっております。
こちら考えられる原因は何になりますでしょうか？
ご回答、またはアドバイスをいただけますと幸いです。

なにとぞよろしくお願いいたします。

※※※※※※※※※※※※※※※※※※※※※※※※※※※
追記です。

『テーブルをクリックすることで、その行のコード列の値がテキストボックス#codeに値が入る』

▼上記の関数がこちらです。▼

$("#datatable tbody").off().on('click', 'tr', function() {
selectedRowItems = $("#datatable").dataTable().fnGetData(this);
var code = document.querySelector("#code");
code.value = selectedRowItems[0];

▼テキストボックス【#code】▼

<form name="codeForm"> <input id="code" type="text" name="code" size="10"> </form> ------------------------------------------------------------ ▼↑ボタン▼ <button class="btn-cal btn-delete" id="up">↑</button> ------------------------------------------------------------ datatablesというプラグインのテーブルを使い、SQLのデータをそのままテーブルに引っ張ってきています。

Comments

[退会済みユーザー]

テーブルの箇所ですがhtmlコードを質問文に追加されたほうが回答を得られやすいかと思います。
またコードはhtmlとjavascriptそれぞれコードブロックで囲っていただけますか

[Lhankor_Mhy]

『テーブルをクリックすることで、その行のコード列の値がテキストボックス#codeに値が入る』の部分のコードをご提示ください。

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

直接の回答にはなっていないと思うのですが、

$("td:contains(" + code + ")")

としていると、codeに3が来た場合、'33'も'13'も'993'その他たくさん含まれてしまうのではないでしょうか？
また、コードが入っているtd以外も対象になってしまい、選択行が正しく判断されないケースもあると思います。

trタグにidとしてコードを付与し、それで行を取得した方が良いのではないでしょうか。

<tr id='code1'><td>1</td><td><td>.......</tr>
<tr id='code2'><td>1</td><td><td>.......</tr>

var tr = $("#code"+code);

また、prev()は対象のtrが一つしかセレクトされていない場合、ひとつしか要素を返しません。
ですので、

$(tr).insertBefore($(tr).prev("tr")[0]);

の[0]は不要と思います。

Comments

[osgjup]

ご回答ありがとうございました！そのやり方でやっていきたいと思います！