tableのtr要素のドラッグ＆ドロップで任意の順番を取得したい方法
- jqueryのSortableプラグインを使用して、tableのtr要素をドラッグ＆ドロップで入れ替えることができます。
- rowspanで連結されている<tr>を複数行まとめて1つの要素として扱い、入れ替えることも可能です。
- <table>を入れ子にする方法もありますが、CSSの関係で難しい場合もあるため、別の方法を検討することをおすすめします。
- ベストアンサー
tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取
tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取りたいです。 jqueryのSortableプラグインを調べ、これならできそうとプログラムを組み、 trの一行ごとならばできました。 やりたいことは、rowspanで連結されている<tr>を2行以上まとめて１つの要素とみなし、 入れ替えたいのですが、 jqueryのSortableでできますでしょうか？ <table> <tr><td rowspan="2">一行目</td><td>あいう</td> <tr><td>えお<td></tr> <tr><td rowspan="2">二行目</td><td>かきく</td> <tr><td>けこ<td></tr> </table> <table>を入れ子にすれば実現はできそうですが、 ちょっとCSSの関係もあり、その方法を採用するのは難しい気がしています。
- maho_momo
- お礼率91% (62/68)
- AJAX
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
Google Chromeでも出来た。しかし 何故か、Google Chrome Ver 7.0.517.41 だと、↓ しないと、 うまくいかない。謎だ！ case "dragend": if(dt.dropEffect=="move") var target_table = target.parentNode; //Chrome で変数に渡せないなぜだ！ var idx = target.rowIndex; //Chrome で変数に渡せないなぜだ！ if(this.rowspan==0){ target.parentNode.deleteRow(target.rowIndex); }else { for(var i=this.rowspan-1;i>=0;i--){ target.parentNode.deleteRow(target.rowIndex+i); } } return; それから、 dt.setData("text/html" ～ dt.getData("text/html" ～ じゃなくて、こおいった時は本来 dt.setData("text/plain" ～ dt.getData("text/plain" ～ か。 さらに、 arguments.callee(tr.nextElementSibling); は、関係無いところまで検査してしまっている。まあ、いいかっと。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
とってつけたような強引な対応ですが、Rowspanに対応しました。 ※「Element.nextElementSibling」も使ったのでFirefox3.5以上です。 ※ 尚、ドロップ先がRowspanでまとめられてる場合は考慮してません。 ※例によって、全角空白は半角空白にしてね。 ※だれかが、もっといいやつを作ってくれるかもしれない。 function dragtable(table){ ---前と同じなので省略--- ctx.stroke(); this.rowspan = 0; this.handleEvent = function(event){ var dt= event.dataTransfer; var target = event.target; switch (event.type){ case "dragstart": var trs = target.innerHTML; this.rowspan = 0; this.rowspanchk(target); if(this.rowspan > 0){ for(var i=0;i<this.rowspan-1;i++){ trs += "~" + target.nextElementSibling.innerHTML; } } dt.setData("text/html",trs); dt.setDragImage(canvas,13,13); dt.effectAllowed = "move"; return; case "dragover": if(target.nodeName == "TD" || target.nodeName == "TH") event.preventDefault(); return; case "drop": var trs = dt.getData("text/html").split("~"); var target_tr = target.parentNode; for(var i=trs.length;i>0;i--){ var tr = target_tr.parentNode.insertRow(target_tr.rowIndex); tr.innerHTML = trs[i-1]; tr.setAttribute("draggable","true"); target_tr.parentNode.insertBefore(tr,target_tr.nextElementSibling); } event.preventDefault(); return; case "dragend": if(dt.dropEffect=="move") var target_table = target.parentNode; var idx = target.rowIndex; if(this.rowspan==0) target_table.deleteRow(idx); else { for(var i=this.rowspan-1;i>=0;i--){ target_table.deleteRow(idx+i); } } return; } } } dragtable.prototype.rowspanchk = function(tr){ var td = tr.childNodes; var rowspan = []; for(var i=0;i<td.length;i++){ if(td[i].getAttribute("rowspan") > 0) rowspan.push(td[i].getAttribute("rowspan")); } rowspan.sort(); if(rowspan[0]){ this.rowspan += rowspan[0]; arguments.callee(tr.nextElementSibling); } } myDragTable = new dragtable(document.getElementById("dragtable"));
- yyr446
- ベストアンサー率65% (870/1330)
こんなんで、（Firefox 3.1 以上） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table id="dragtable" border="1" style="margin:10px auto 10px;"><tbody> <tr><th>A</th><th>B</th><th>C</th></tr> <tr draggable="true"><td>a</td><td>b</td><td>c</td></tr> <tr draggable="true"><td>あ</td><td>い</td><td>う</td></tr> <tr draggable="true"><td rowspan="2">１</td><td>２</td><td>３</td></tr> <tr draggable="true"><td>ろ</td><td>は</td></tr> <tr draggable="true"><td>x</td><td>y</td><td>z</td></tr> <tr draggable="true"><td>X</td><td>Y</td><td>Z</td></tr> </tbody></table> <script type="text/javascript"> function dragtable(table){ this.table = table; table.addEventListener("dragstart",this,false); table.addEventListener("dragover",this,false); table.addEventListener("drop",this,false); table.addEventListener("dragend",this,false); var canvas = document.createElement("canvas"); canvas.width = canvas.height = 26; var ctx = canvas.getContext("2d"); ctx.lineWidth = 2; ctx.moveTo(0,0),ctx.lineTo(26,13),ctx.moveTo(0,26),ctx.lineTo(26,13); ctx.stroke(); this.handleEvent = function(event){ var dt= event.dataTransfer; var target = event.target; switch (event.type){ case "dragstart": dt.setData("application/x-moz-node",event.target); dt.setData("text/html",event.target.innerHTML); dt.setDragImage(canvas,13,13); dt.effectAllowed = "move"; return; case "dragover": if(target.nodeName == "TD") event.preventDefault(); return; case "drop": var target_tr = target.parentNode; var tr = target_tr.parentNode.insertRow(target_tr.rowIndex); tr.innerHTML = dt.getData("text/html"); tr.setAttribute("draggable","true"); event.preventDefault(); return; case "dragend": if(dt.dropEffect=="move") target.parentNode.deleteRow(target.rowIndex); return; } } } myDragTable = new dragtable(document.getElementById("dragtable")); </script> </body> </html> Rowspan対応も出来そう(まとめて移動すればよいのか)だが．．．． 続く．．．．（続かないかも）
関連するQ&A
- CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？
CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？ 例えば、HTMLで一行に3列になるよう以下の様に記述した時に <table> <tr> <td> <p>テキスト左</p> </td> <td> <p>テキスト中</p> </td> <td> <p>テキスト右</p> </td> </tr> </table> CSSでのそうさのみによって 見栄え的に縦3行、横1列に見えるようにできますでしょうか？ 幅などをピクセル制限したりするのでも構いません。 もしHTMLで実現するとするならば <table> <tr> <td> <p>テキスト左</p> </td> </tr> <tr> <td> <p>テキスト中</p> </td> </tr> <tr> <td> <p>テキスト右</p> </td> </tr> </table> 上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。 もし、何らかの形で実現できそうな場合がありましたらアイディアをください。 お忙しいところお手数おかけしますが、よろしくお願いいたします。 ※CSS記述の変更のみ。 ※特定のブラウザに依存させたくない。 ※Javasprictは使用しない。
- 締切済み
- HTML
- <TR>要素を横に並べたい。
あるプログラムの中でどうしてもtr要素を横に並べたいのですが、CSSなどで指定することによって可能でしょうか？ <tabel> <tr><td>a</td><td>1</td><td>e</td></tr> <tr><td>b</td><td>2</td><td>f</td></tr> <tr><td>c</td><td>3</td><td>g</td></tr> <tr><td>d</td><td>4</td><td>h</td></tr> </table> のような場合通常は、 a 1 e b 2 f c 3 g d 4 h のように並びますが、 a 1 e b 2 f c 3 g d 4 h このような感じで横に並べ、画面の幅に合わせて a 1 e b 2 f c 3 g d 4 h のように折り返されるようにしたいのですが、可能でしょうか？
- ベストアンサー
- HTML
- DOMでtableにtr要素を追加する
テキストデータが入った行をHTMLのテーブルに追加したいのですが、 tr要素をappendChildすると、下図の（B）に追加されますが、 それを（A）に追加するようにしたいのですが、どう書けば 良いのでしょうか？ <table> <tbody> ←（A） <tr>...</tr> <tr>...</tr> ←（B） </tbody> </table> また、tbodyの子要素(tr)を消すことはできますか？ 際限なく長いテーブルになっても困るので・・・ 以上よろしくおねがいします
- ベストアンサー
- JavaScript
- テーブル<TR></TR>の処理について
次の様な処理を行いたいのですが方法をご教授下さい。 DBのテーブルに10個のレコードがあります。 すべてのレコードの情報を表示させます。 HTMLのテーブルは2列5行で表示させたい。 つまりHTMLで下記のように表示したい。 <TABLE> <TR> <TD>データ1</TD> <TD>データ2</TD> <TD>データ3</TD> <TD>データ4</TD> <TD>データ5</TD> </TR> <TR> <TD>データ6</TD> <TD>データ7</TD> <TD>データ8</TD> <TD>データ9</TD> <TD>データ10</TD> </TR> </TABLE> これをPHPで <? $con = mysql_connect("$dbhost", "$dbuser", "$dbpass"); mysql_select_db("$dbname"); $sql= "select * from DB_name"; $rs=mysql_query($sql); ?> <TABLE> <TR> <? while($row=mysql_fetch_array($rs)){ ?> <td><? echo $row['data'] ?></td> <?}?> </tr> </table> のように単純にデータを取り出すことは出来るのですが、 データを5つ毎に</TR><TR>を出す方法が分かりません。 このような処理は皆様はどのように行っていますか。 基本的な質問で申し訳ありませんが、ご教授下さい。 よろしくお願い致します。
- ベストアンサー
- PHP
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSS
特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、 外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？ 【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案３】外枠（田の字）だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね？ <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠（田の字）だけに、IDをつけたり識別して、効率よく処理できませんか？ <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body> <table cellpadding=10> <tr> <td> <table cellpadding=10><tr><td>区画１</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画２</td></tr></table> </td> </tr> <tr> <td> <table cellpadding=10><tr><td>区画３</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画４</td></tr></table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- HTMLのrowspan
HTML初心者です。 下記のようにテーブルを作成していますが、 ２行目がなかったことにされてしまいます。 <table> <tr><td rowspan=2>1-1</td><td rowspan=2>1-2</td></tr> <tr></tr> <tr><td>3-1</td><td>3-2</td></tr> </table> 結合されたセルを２行分の高さで表示することはできますか？ ただ、実際のHTMLはPHPで動的に作成しているので、 できれば「height属性で１行目の高さを２行分にする」以外の 方法を探しています。 以上、よろしくお願いします。
- 締切済み
- HTML
- セルの高さを固定するには？
2列2行のテーブルを作り、右の列をrowspan=2で結合しています。 右の列はテキストや画像を追加入力していくので、縦が長くなっていきます。 その際、左上のセルだけ高さを固定し、左下のセルは自動で高さが決まるようにしたいと思っています。 が、左上のセルにheight=150と入力しても、右が伸びるにつれて長くなってしまいます。 CSSで指定しても同じです。 rowspanを使うと、結合していないセルの高さを固定することはできないのでしょうか。 良い解決策がありましたら、お知恵をお貸し下さい。 <table> <tr> <td>ここを固定したいです</td> <td rowspan="2">ここが長くなっていきます</td> </tr> <tr> <td>ここは右が長くなるにつれて自動で伸びるようにしたいです</td> </tr> </table>
- ベストアンサー
- HTML
- foreachの間にテーブルの<TR>を出力
HTMLのテーブルにデータを入れたいのですが、 6列ごとに改行の<tr></tr>を入れる方法が分かりません。 下のように並べたいです [ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME] [ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME][ITEMNAME] データは1～12個きますので、一行の時と二行にわたる時、<td></td>に何もデータが入らない時もあります。 今現在このような感じです。 <table width="600"> <tr> <?php foreach ($item_array as $item){ ?> <td width="100" align="center"> <?=$str = mb_strimwidth($item['ITEMNAME'], 0, 100, "...");?> </td> <?php } ?> </tr> </table> どうか宜しくお願い致します。 既に他で同じ内容が出ていますが、そちらでは理解して応用できませんでしたので改めて質問させて頂きました。ごめんなさい。
- ベストアンサー
- PHP
- スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか？ <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }
- ベストアンサー
- HTML
お礼
yyr446様 すばらしいです！！ ありがとうございました。 勉強させていただきました。