プログラミングの助け、質問への回答 / Javascript / tr値の変更時にtrタグのデータソート属性に基づいてテーブルの行を動的にソートする方法 - javascript、jquery、sorting

どのようにテーブルの行を動的にその値が変更されたtrタグのデータソート属性に基づいて並べ替える - javascript、jquery、sorting

私はテーブルがあり、私はユーザーによって行を並べ替えたい、各行は1つの入力を含む行番号を入力します。ここで行は data-sort の属性 tr 各入力には rownum 値がtrの値と等しい属性 data-sort ここに6行あります。各行の入力値を取得し、その行を移動すると、属性の値は入力と同じになります。たとえば、行の1つの入力に1を入力すると、その行は次のようになります。最初の行次のコードは初めて実行されますが、移動後に行の1つがもう動作しません。値が変更されたとき。私のミスはどこですか？

jsfiddle

 $(".m").on("change", function () {

var Des = parseInt($(this).val());
var RowNum = parseInt($(this).attr("rownum"));

$("tr[data-sort="" + RowNum + ""]").attr("data-sort", -100);
$("input[rownum="" + RowNum + ""]").attr("rownum", -100);
if (Des > RowNum) {
for (var i = RowNum + 1; i <= Des; i++) {
var newVal = i - 1;
$("tr[data-sort="" + i + ""]").attr("data-sort", newVal);
$("input[rownum="" + i + ""]").attr("rownum", newVal);
}
}

if (Des < RowNum) {
for (var i = Des + 1; i <= (RowNum - 1); i++) {
var newVal = i + 1;
$("tr[data-sort="" + i + ""]").attr("data-sort", newVal);
$("input[rownum="" + i + ""]").attr("rownum", newVal);
}
}
$("tr[data-sort="-100"]").attr("data-sort", Des);
$("input[rownum="-100"]").attr("rownum", Des);

var divList = $("tr");
divList.sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});


$("tbody").html(divList);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>

回答：

回答№1は0

あなたがコードを再構築して置き換えるときにあなたがリスナーを持っている場合は、クラス "m"を持つ新しい作成された要素にイベントリスナーをリビルドする必要があります。次のようなものです（エレガントではなく、実際の例を示すためにここにしかありませんが、すべてのテストが必要なわけではありませんが、データソート属性に入力値を割り当て、

$(".m").on("change", function (evt) {

changeOrder(evt);

})


function changeOrder(evt){
$this=$(evt.currentTarget);
var Des = parseInt($this.val());
var RowNum = parseInt($this.attr("rownum"));

$this.parent().parent().data("sort",Des)


var divList = $("tbody").find("tr").sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});

$("tbody").html(divList);

$(".m").on("change", function (evt) {
changeOrder(evt);
})

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>

どのようにテーブルの行を動的にその値が変更されたtrタグのデータソート属性に基づいて並べ替える - javascript、jquery、sorting

回答：

関連する質問