- ベストアンサー
JS 簡単なコードで表を転置できますか？
JavaScript 簡単なコードで表を転置できますか？ ここに１つのテーブルがあります。 これを簡単なコードで 転置できますか？ ここにいう転置とは、 表のセルについて、(m×n行列) => (n×m行列) に変換することです。 ＜仕様＞ ・テーブルの列と行を入れ替える ・文字は横書きのままで変更なし ・Vanilla JS で ( jQuery 無用 ) ・チェックボックスでトグル <div><input type="checkbox" id="menu">転置</div> <div class="container"> <table id="table2" border="1"> <caption>世界の高い山 トップ10</caption> <thead> <tr><th>順位</th><th>山の名称</th><th>標高 (ｍ)</th></tr> </thead> <tbody> <tr><td> 1位</td><td>エベレスト</td><td>8,848</td></tr> <tr><td> 2位</td><td>Ｋ２</td><td>8,611</td></tr> <tr><td> 3位</td><td>カンチェンジュンガ</td><td>8,586</td></tr> <tr><td> 4位</td><td>ローツェ</td><td>8,516</td></tr> <tr><td> 5位</td><td>マカルー</td><td>8,485</td></tr> <tr><td> 6位</td><td>チョ・オユー</td><td>8,201</td></tr> <tr><td> 7位</td><td>ダウラギリ</td><td>8,167</td></tr> <tr><td> 8位</td><td>マナスル</td><td>8,163</td></tr> <tr><td> 9位</td><td>ナンガ・パルバット</td><td>8,126</td></tr> <tr><td>10位</td><td>アンナプルナ</td><td>8,091</td></tr> </tbody> </table> </div>
- retorofan
- お礼率86% (314/362)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <style></style> <body> <div><input type="checkbox" id="menu" onclick=" let A=a=>[...a.rows].map(a=>[...a.cells]), B=a=>a[0].map((_,i)=>a.map(b=>b[i])), C=(a,b=document.createElement('tbody'))=>a.reduce((a,b)=>(a.insertRow().append(...b),a) ,b), D=table2.tBodies[0]; D.replaceWith((C(B(A(D))))); " >転置</div> <div class="container"> <table id="table2" border="1"> <caption>世界の高い山 トップ10</caption> <tbody> <tr><th>順位<th>山の名称<th>標高 (ｍ) <tr><td> 1位<td>エベレスト<td>8,848 <tr><td> 2位<td>Ｋ２<td>8,611 <tr><td> 3位<td>カンチェンジュンガ<td>8,586 <tr><td> 4位<td>ローツェ<td>8,516 <tr><td> 5位<td>マカルー<td>8,485 <tr><td> 6位<td>チョ・オユー<td>8,201 <tr><td> 7位<td>ダウラギリ<td>8,167 <tr><td> 8位<td>マナスル<td>8,163 <tr><td> 9位<td>ナンガ・パルバット<td>8,126 <tr><td>10位<td>アンナプルナ<td>8,091 </tbody> </table> </div>
関連するQ&A
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- JS 簡単なコードで順位を上下反転できますか？
JavaScript 簡単なコードで順位を上下反転できますか？ ここに１つのテーブルがあります。 これを簡単なコードで順位を上下反転できますか？ ＜仕様＞ ・フィールド行（項目名）は最上位で固定 ・CSS または Vanilla JS ( jQuery 無用 ) ・チェックボックスでトグル <div><input type="checkbox" id="menu">逆順</div> <table id="table1" border="1"> <caption>ビタミンC 含有量トップ10</caption> <thead> <tr><th>順位</th><th>野菜名</th><th>含有量 (mg)</th></tr> </thead> <tbody> <tr><td> 1位</td><td>ピーマン(トマピー)</td><td>200</td></tr> <tr><td> 2位</td><td>赤ピーマン(パプリカ)</td><td>170</td></tr> <tr><td> 3位</td><td>芽キャベツ</td><td>160</td></tr> <tr><td> 4位</td><td>黄ピーマン(パプリカ)</td><td>150</td></tr> <tr><td> 4位</td><td>オレンジピーマン(パプリカ) </td><td>150</td></tr> <tr><td> 6位</td><td>ブロッコリー</td><td>140</td></tr> <tr><td> 7位</td><td>とうがらし</td><td>120</td></tr> <tr><td> 7位</td><td>パセリ</td><td>120</td></tr> <tr><td> 9位</td><td>なばな</td><td>110</td></tr> <tr><td>10位</td><td>カリフラワー</td><td>81</td></tr> </tbody> </table>
- ベストアンサー
- JavaScript
- 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のunwrapメソッド)
jquery のunwrapメソッドを使用して下記コードを作成しました。 「div#wrap1」の配下に 「div#wrap2」、「div#wrap3」「div#wrap4」3つのdiv要素がありその3つの要素 それぞれの配下にはテーブル(3つとも同じ名前のテーブル)が存在しています。 ボタンを押下すると「div#wrap1」、「div#wrap2」、「div#wrap3」「div#wrap4」 を全て除去し、テーブルも1つだけ残すコードを書きました。 しかし、ボタン押下後、IEの開発者ツールでHTMLを確認するとテーブルは１つだけ 残っているのですが「div#wrap1」配下に存在しています。 コード中ではテーブルが残り1つになったテーブルに対して$(this).unwrap()とやって いるのですがこれがうまくいっていないようです。 原因がわかられる方はいらっしゃいますでしょうか。 <html> <head> <meta charset="UTF-8" /> <script src="jquery-1.9.1.js"></script> <script> $(function () { $( "#add" ).click(function () { if($("table[name='tblList']").length > 1) { // tableの親要素「div#wrap2」、「div#wrap3」「div#wrap4」を除去 $("table[name='tblList']").unwrap(); $("table[name='tblList']").each(function(){ // 「name='tblList'」のテーブルを削除 $(this).remove(); //「name='tblList'」のテーブルが残り1つの場合 if($("table[name='tblList']").length == 1) { // tableの親要素「div#wrap1」を除去 $(this).unwrap(); return false; } }); } }); }); </script> </head> <body> <input type="button" id="add" value="行追加"> <div id="wrap1"> <div id="wrap2"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap3"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap4"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- JS テーブルのアニメーション表示
JavaScript テーブルのアニメーション表示 ここに１つのテーブルがあります。 「すべて表示」にチェックを入れたら、すべての列を表示します。 「３大栄養素」にチェックを入れたら、３大栄養素の列だけ表示します。 次の仕様を満たすには、どのようなコードになりますか？ ＜仕様＞ ・「３大栄養素」は表の項目セルに「S３」クラスを付与 ・チェックボックスで列の表示制御をする ・表示・非表示はスライド・アニメーション ［HTML］ <div class="container"> <form name="form2"> <label><input name="check2" type="checkbox">３大栄養素</label> </form> <table id="tbl3"> <caption>イチジクの栄養価</caption> <thead> <tr> <th>状態</th> <th>エネルギー</th> <th>水分</th> <th class="S3">たんぱく質</th> <th class="S3">脂質</th> <th class="S3">炭水化物</th> <th>灰分</th> <th>飽和脂肪酸</th> <th>不飽和脂肪酸</th> <th>コレステロール</th> <th>食物繊維</th> </tr> </thead> <tbody> <tr> <th>生</th><td>54 kcal</td><td>84.6g</td><td>0.6g</td> <td>0.1g</td><td>14.3g</td><td>0.4g</td><td>0.02g</td> <td>0.07g</td><td>0</td><td>1.9g</td> </tr> </tr> <th>乾</th><td>291 kcal</td><td>18.0g</td><td>3.0g</td> <td>1.1g</td><td>75.3g</td><td>2.5g</td><td>0.17g</td> <td>0.60g</td><td>0</td><td>10.7g</td> </tr> </tbody> </table> </div>
- 締切済み
- JavaScript
- 罫表のセル結合
AJAXの勉強をしています。 Htmlに表示されている罫表の選んだセルをセル結合するような処理を 作りたいのですが、可能でしょうか。 DOMを使用してセルの削除等は出来たのですが、セル結合を行う事が出来ないのです。 function joinSpan( ) { // 出力先のトップ要素となるtable要素 var table = document.getElementById("result"); //とりあえずセル削除してみる。 var child = table.childNodes; var child2 = child[0].childNodes; child[0].removeChild(child2[1]); } ↓対象となるテーブル <table id="result"> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody > <tr><td>あ</td><td>う</td><td>え</td><td>お</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> 何か良い方法がありましたら、教えて頂ければと思います。
- ベストアンサー
- JavaScript
- クリックされた罫表セルの行番号、列番号を取得するには
クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3 という番号を取得したいのです。 <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- tableヘッダーの縦書き
Bootstarapを利用しているのですが、Tableのヘッダー部を 縦書きにするにはどのようにすれば良いでしょうか？ <h2>Bordered Table</h2> <div class="table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Page</th> <th>Visits</th> <th>% New Visits</th> <th>Revenue</th> </tr> </thead> <tbody> <tr> <td>/index.html</td> <td>1265</td> <td>32.3%</td> <td>$321.33</td> </tr> <tr> <td>/about.html</td> <td>261</td> <td>33.3%</td> <td>$234.12</td> </tr> <tr> <td>/sales.html</td> <td>665</td> <td>21.3%</td> <td>$16.34</td> </tr> <tr> <td>/blog.html</td> <td>9516</td> <td>89.3%</td> <td>$1644.43</td> </tr> <tr> <td>/404.html</td> <td>23</td> <td>34.3%</td> <td>$23.52</td> </tr> <tr> <td>/services.html</td> <td>421</td> <td>60.3%</td> <td>$724.32</td> </tr> <tr> <td>/blog/post.html</td> <td>1233</td> <td>93.2%</td> <td>$126.34</td> </tr> </tbody> </table> </div>
- 締切済み
- CSS
- JS テーブルのデータをシャッフルするには？
JavaScript テーブルのデータをシャッフルするには？ ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルするには どんなコードでできますか？ 要は、テーブル内容をランダムに並べ替える、ということです。 ＜仕様＞ ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button1">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table>
- 締切済み
- JavaScript
- idをつけてるtdタグの値をjQueryで
初めて質問させていただきます。 下記のようなテーブルがあった場合、<td id="ID">1234</td>の「1234」をjQueryで取得したいのですが、うまくいきません。 ご教授お願いいたします。 テーブルの例 <table id="nameTable"> <thead> <tr> <th>aaa</th> </tr> <tr> <td id="ID">1234</td> </tr> </thead> </table> 記述したjQuery $('table.nameTable td.ID').text();
- 締切済み
- JavaScript
お礼
ご回答ありがとうございます。 お見事です！