アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：himura99
  • 質問日時：
  • 回答数：3件

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

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

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

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

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



<style>
//スタイルシートはcssで適当に・・・
table{border-collapse: collapse;}
tr:nth-child(2n) td,tr th{background-Color:yellow;}
th,td{border:1px solid #000000;}
</style>
<script>
try{
document.addEventListener("click",function(e){func(e)},true);
}catch(e){
document.attachEvent("onclick",function(e){func(e)});
}
function func(e){
var obj= (e.srcElement || e.target);
if(obj.nodeName!="INPUT") return false;
var n=obj.name;
if(n!="u" && n!="d") return false;
var p=obj;
var r1=null; //自分の行
var r2=null; //交換する行
while(p){
if(p.nodeName=="TR"){
r1=p;
r2=p;
while(r2){
r2=(n=="u")?r2.previousSibling:r2.nextSibling;
if(r2 == null) break;
if(r2.nodeName=="TR") break;
}
break;
}
p=p.parentNode;
}
if(r2 == null) return false;
p=r1.parentNode;
var r1c=r1.cloneNode(true);
var r2c=r2.cloneNode(true);
p.replaceChild(r1c,r2);
p.replaceChild(r2c,r1);
}
</script>
<form>
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr id="x">
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="button" value="&uarr;" name="u"><input type="button" value="&darr;" name="d"></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td><input type="button" value="&uarr;" name="u"><input type="button" value="&darr;" name="d"></td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td><input type="button" value="&uarr;" name="u"><input type="button" value="&darr;" name="d"></td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td><input type="button" value="&uarr;" name="u"><input type="button" value="&darr;" name="d"></td>
</tr>
</tbody>
</table>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/07/07 21:09

No.3

  • 回答者： babu_baboo
  • 回答日時：

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


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

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/07/07 21:10

No.1

  • 回答者： fujillin
  • 回答日時：

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




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

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

* データをどのように保持しているのかは確認していません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ドラッグ＆ドロップのやり方も興味があるので確認させてもらいます。
ご回答ありがとうございました。

通報する
お礼日時：2011/07/07 21:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報