Javascriptでtable内の行を上下に移動させたいと思います。横に↑ボタンと↓ボタンを用意し、クリックした分だけ上下に移動させるのが理想です。ライブラリはJQueryやその外部ライブラリであれば使用可能ですが、行内の要素( タグやその属性等)は別の処理で直接触りたい為、TABLE以下のタグがライブラリの使用者から隠蔽されるようなライブラリの使用は難しいです。ご存知の方がいらっしゃいましたらご回答の程、よろしくお願いします。

JavaScriptでテーブルの行入れ替え

解決済

質問者：himura99
質問日時：2011/07/06 22:44
回答数：3件

Javascriptでtable内の行を上下に移動させたいと思います。
横に↑ボタンと↓ボタンを用意し、クリックした分だけ上下に移動させるのが理想です。

ライブラリはJQueryやその外部ライブラリであれば使用可能ですが、
行内の要素(<TD>タグやその属性等)は別の処理で直接触りたい為、TABLE以下のタグが
ライブラリの使用者から隠蔽されるようなライブラリの使用は難しいです。

ご存知の方がいらっしゃいましたらご回答の程、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2011/07/07 10:42

いまいちきたないソースですがざっくりこんな感じで？

- 0
- 件

通報する

この回答へのお礼

バッチリやりたかった事が出来ました。使用させて頂きます。
ご回答ありがとうございました。

通報する

お礼日時：2011/07/07 21:09

No.3

回答者： babu_baboo
回答日時：2011/07/07 18:34

ぜんかくくうはくは、すべてはんかくにしてください。

いろいろとめんどうなので、てきとうにかきました。
てーぶるのせるをくりっくしたとき、ひだりよりなら、うえといれかえ。
みぎよりならしたといれかえてます。
みやすさゆうせんで、いんでんとしてるのに、こーどはきたない？

<!DOCTYPE html>
<title></title>

<style type="text/css">
table, th, td {
　border :1px #00f solid;
}
td, th {
　width :10em;
}

</style>

<table>
　<tr>
　　<th>1
　　<td>abc
　　<td>def
　<tr>
　　<th>2
　　<td>ghi
　　<td>jkl
　<tr>
　　<th>3
　　<td>mno
　　<td>pqr
</table>

<script type="text/javascript">
//@cc_on

function get1 (e) {
　/*@if(1)
　　var d = e.srcElement.ownerDocument;
　　var c = ('CSS1Compat' === d.compatMode) ? d.documentElement : d.body;
　　return e.clientX + c.scrollLeft;
　@else@*/
　　return e.clientX + e.target.ownerDocument.defaultView.pageXOffset;
　/*@end@*/;
}

function get2 (e) {
　var x = 0; do x += e.offsetLeft; while (e = e.offsetParent); return x;
}

document./*@if (1) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'click',
　function (event) {
　　var e = event.target || event.srcElement;
　　
　　if (/^(?:TD|TH)$/.test (e.tagName)) {
　　　var x = get1 (event) - get2 (e);
　　　var tr = e.parentNode;
　　　var tb = tr.parentNode;
　　　var a = tr.rowIndex;
　　　var b = a;
　　　
　　　if ((x < e.offsetWidth / 2))
　　　　a -= 1;
　　　else
　　　　b += 1;
　　　
　　　if (a < 0 || tb.rows.length <= b)
　　　　return;

　　　tb.insertBefore (tb.rows[b], tb.rows[a]);
　　}
　}, false);

</script>

- 0
- 件

通報する

この回答へのお礼

ちゃんと書き換えきれていないのかまだ動かせていないのですが;
こちらも異なるロジックなので勉強させてもらいます。
ご回答ありがとうございました。

通報する

お礼日時：2011/07/07 21:10

No.1

回答者： fujillin
回答日時：2011/07/07 09:27

ライブラリがあるのではないかと探してみましたが、行の入替えはソートするものが多いですね。

ご希望のインターフェースとは違いますがご参考まで。（どちらもドラッグ＆ドロップです）

◇行の入替え
http://www.isocra.com/2008/02/table-drag-and-dro …
◇列の入替え
http://www.danvk.org/wp/dragtable/

* データをどのように保持しているのかは確認していません。