テーブルの行を選択し、上下のボタンを押すことで、テーブルの選択行の並びを上下に入れ替えできるようにしたいと思っています。
テーブルをクリックすることで、その行のコード列の値がテキストボックス#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のデータをそのままテーブルに引っ張ってきています。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
直接の回答にはなっていないと思うのですが、
$("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]は不要と思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
退会済みユーザー
2016/05/25 11:55
テーブルの箇所ですがhtmlコードを質問文に追加されたほうが回答を得られやすいかと思います。
またコードはhtmlとjavascriptそれぞれコードブロックで囲っていただけますか
Lhankor_Mhy
2016/05/25 11:58
『テーブルをクリックすることで、その行のコード列の値がテキストボックス#codeに値が入る』の部分のコードをご提示ください。
kei344
2016/05/25 23:48
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。