- ベストアンサー
JavaScriptでテーブルの行入れ替え
Javascriptでtable内の行を上下に移動させたいと思います。 横に↑ボタンと↓ボタンを用意し、クリックした分だけ上下に移動させるのが理想です。 ライブラリはJQueryやその外部ライブラリであれば使用可能ですが、 行内の要素(<TD>タグやその属性等)は別の処理で直接触りたい為、TABLE以下のタグが ライブラリの使用者から隠蔽されるようなライブラリの使用は難しいです。 ご存知の方がいらっしゃいましたらご回答の程、よろしくお願いします。
- himura99
- お礼率69% (56/81)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
いまいちきたないソースですがざっくりこんな感じで？ <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="↑" name="u"><input type="button" value="↓" name="d"></td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td><input type="button" value="↑" name="u"><input type="button" value="↓" name="d"></td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td><input type="button" value="↑" name="u"><input type="button" value="↓" name="d"></td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td><input type="button" value="↑" name="u"><input type="button" value="↓" name="d"></td> </tr> </tbody> </table> </form>
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、すべてはんかくにしてください。 いろいろとめんどうなので、てきとうにかきました。 てーぶるのせるをくりっくしたとき、ひだりよりなら、うえといれかえ。 みぎよりならしたといれかえてます。 みやすさゆうせんで、いんでんとしてるのに、こーどはきたない？ <!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>
お礼
ちゃんと書き換えきれていないのかまだ動かせていないのですが; こちらも異なるロジックなので勉強させてもらいます。 ご回答ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
ライブラリがあるのではないかと探してみましたが、行の入替えはソートするものが多いですね。 ご希望のインターフェースとは違いますがご参考まで。（どちらもドラッグ＆ドロップです） ◇行の入替え http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ ◇列の入替え http://www.danvk.org/wp/dragtable/ * データをどのように保持しているのかは確認していません。
お礼
ドラッグ＆ドロップのやり方も興味があるので確認させてもらいます。 ご回答ありがとうございました。
関連するQ&A
- jqueryでテーブル行のマウスアウト時の動作
jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで行を追加しながら行の色分け
jQueryでボタンを押すと行が追加・削除されるようにしています。 var data; jQuery(function(){ jQuery('#add').click(function(){ var len = $("#tbl tbody").children().length; if(len>19){ $("#add").attr("disabled","disabed"); } data = '<tr><td>' + (len+1) + '</td><td><textarea name="clmn' + (len+1) + '" cols="30" rows="10"></textarea></td><td><img src="/images/noimage.gif" alt="img' + (len+1) + '" /></td><td><input type="file" name="image' + (len+1) + '" /></td></tr>'; jQuery('#tbl').append(data); }); jQuery('#del_bottom').click(function(){ if (jQuery('tbody tr').length) { jQuery('tbody tr:last').remove(); } }); }); ここで偶数行と奇数行の色を変化させようと $(document).ready(function(){ $("table").each(function(){ jQuery(this).find("tr:even").addClass("even"); }); $("table").each(function(){ jQuery(this).find("tr:odd").addClass("odd"); }); }); というスクリプトを用意しましたが、 同時に動かそうとしても動きません。 何か方法は無いでしょうか？ 初期状態では色分けをされていますが、追加した段階で追加された行には適応されません。 詳しいかた教えていただけるでしょうか？
- ベストアンサー
- JavaScript
- JavaScript 保守性の高いコードの書き方
保守性の高いコードを書きたいです。JavaScriptでdocument.write("<div id='main'></div>")みたいに書いて、後でこの要素にいろいろなコードでdocument.getElementById('main').innerHTMLします。しかし、その後id名mainを他の名前に変えると、多くのソースコードを手作業で変更しなくてはなりません。この手間を削減するJavaScriptの書き方はありますか？ 例えば、 <table id="board"> <tr> <td id="b0_0">A</td> <td id="b0_1">A</td> <td id="b0_2">A</td> <td id="b0_3">A</td> ・ ・ ・ 上記のようなHTMLを作成する、以下のようなコードがあります。 <table id='board'></table> <script> var content = ""; for(i = 0; i < 5; i++){ content += "<tr>" for(j = 0; j < 4; j++){ content += "<td id='b"+ i + "_" + j +"'>A</td>" } content += "</tr>" } $('table#board').html(content) // JQueryを使っているつもりです </script> このコードの問題点は少なくとも2つあって、 １つは、2重ループ内の「content += "<td id='b"+ i + "_" + j +"'>A</td>"」が読みづらいことです。 2つ目は、今は td id='b0_1'のような形式ですが、このid名を変更しようと思ったときに、変更が容易ではないことです。 特に2つ目は、いろいろな場所にあるコードから$('table#board td#b1_1').html('B')のような操作をしていると、かなり変更が大変です。 こういったことを乗り越えるためのJavaScriptのコード設計法（？）やIDEやライブラリなどがありましたら教えて下さい。よろしくお願いします
- ベストアンサー
- JavaScript
- テーブルの行操作について
下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか？ <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>
- ベストアンサー
- JavaScript
- javascriptとjQueryについて
javascriptの基礎部分を学びその後、jQueryを学習しました。 ある程度jQueryはできるようになりました。 しかしjQueryはjavascriptのライブラリでjavascriptを簡単に書けるということなのでjavascriptも深いところまで学習すべきか迷っています。 jQueryを学習したのならjavascriptは深いところまでしなくてもいいのでしょうか？ やはり使用用途で学習するべきとか変わってくるものなのでしょうか？ もし変わってくる場合、こういうことがしたいならjQueryではできないからjavascriptも学習すべきなど簡単な例など出せれたらよろしくお願いします。 現在はPHPとmySQLを学習しています。 質問文が下手で伝わりにくいかもしれないですがよろしくお願いします。
- 締切済み
- JavaScript
- Table内TDの子要素を移動させたいのですが・・
初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD> ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)～(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、１番目のテーブルを取得する var rows = $("table")[0].rows; // 列を１つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を１つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか？
- ベストアンサー
- JavaScript
- 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の関係もあり、その方法を採用するのは難しい気がしています。
- ベストアンサー
- AJAX
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryでの記述をjavascriptに
下記のjQueryの記述をライブラリ無しのjavascriptでの記述にしていただきたいです。 imgタグのsrc属性とaタグのhref属性を相対パスから絶対パスに動的に変換させる必要があるのですが、ある事情でjQueryを使えないとの事で困っています。 どうかよろしくお願い致します。 <script type="text/javascript"> $(function(){ $('#hoge').children('img:not([src^=http])').each(function (){ var imgSrc = $(this).attr('src'); $(this).attr('src','http://xxxxxxxxxxxx' + imgSrc); }); $('#hoge').children('a[href^=○○○]').each(function (){ var aHref = $(this).attr('href'); $(this).attr('href','http://xxxxxxxxxxxx' + aHref); }); }); </script>
- 締切済み
- JavaScript
- クリックでclass属性を変更するjavascriptはどう書けば良い
クリックでclass属性を変更するjavascriptはどう書けば良いか教えて下さい。 クリックで要素が開閉するスクリプトのシンプルなものを探しています。 （開状態でクリック→要素を閉じる。閉状態でクリック→要素を開く） html内にonclickを書かないやり方でお願いします。 クリックする箇所はボタンではなく、aタグのリンクエリアです。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
バッチリやりたかった事が出来ました。使用させて頂きます。 ご回答ありがとうございました。