javascriptでテーブルの一定数の列ごとにtrタグが挿入されるようにしたい
- javascriptでテーブルの一定数の列ごとにtrタグが挿入されるようにしたいのですが、具体的にどのように組んで行けば良いのか分からず困っています。
- 要約文2
- 要約文3
- ベストアンサー
javascriptでテーブルの一定数の列ごとにtrタグが挿入されるようにしたい
javascriptで、以下のような横長1行のテーブル内の「<td></td>」タグが 3列表示されるごとに「</tr><tr>」を挿入されて改行されるようにしたいのですが、 具体的にどのように組んで行けば良いのか分からず困っています。 よろしければご教授お願いします。 ---------------------- 【ソース】 <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>0</td> </tr> </table> 【ブラウザでの表示】 |1|2|3|4|5|6|7|8|9|0| ---------------------- このような形に成型されるようにしたいと思っています。 ↓ ---------------------- 【ソース】 <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>0</td> </tr> </table> 【ブラウザでの表示】 |1|2|3| |4|5|6| |7|8|9| |0| ----------------------
- oshiyanyan
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
「一応」サンプル IE,Firefox,Safari(Win版),Operaで確認。 ただし、Operaの表示だけがちょっと変。 Opera developer toolsで確認すると結果は想定どおりなんだけど…??。 <html> <head> <title></title> <script type="text/javascript"> function sample(tableId){ var oTable = document.getElementById(tableId); var workTable = oTable.cloneNode(1); var cellArr = workTable.getElementsByTagName('td'); for(var i=oTable.tBodies[0].childNodes.length-1;i>=0;i--) oTable.tBodies[0].removeChild(oTable.tBodies[0].childNodes[i]); var c=0; var line = 0; while(cellArr[c]){ var TR = oTable.tBodies[0].insertRow(line++); for(var i=0;i<3;i++,c++){ if(cellArr[c]) TR.appendChild(cellArr[c].cloneNode(1)); else TR.insertCell(i); } } } </script> </head> <body> <table id="t001" border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>0</td> </tr> </table> <input type="button" value="テーブル再構成" onclick="sample('t001')"> </html>
関連するQ&A
- tableタグについて（ウェブリブログ)
ウェブリブログの記事内にテーブルタグで『表』は表示出来たのですが、公開ページを見ると表と同じだけの行数が上部にスペースとしてあきます。 記事作成ページでは改行はしてませんし、空白行もありません。 タグは↓です。 <table bgcolor="#000000"border=1> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> </table> 単純な表ですが別な表示方法があるのでしょうか？ できればタグが知りたいです。
- ベストアンサー
- ブログ
- tableタグ内で、空白セルでも罫線を表示させられるためのタグは
次のように、1行×5列のテーブルがあります。 <html><body> <table border="1"> <tr> <td>1</td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </body></html> 1列目：文字列 1 2列目：未記入 3列目：半角スペース 4列目：全角スペース 5列目：文字実体参照の 2列目と3列目だけ、罫線が表示されないですが（セルがつぶれてみえる） わざわざ とかで<td>と</td>の間を埋めなくても、 罫線を明示的に表示させられるタグがあったと思いましたが、何だったでしょうか。
- ベストアンサー
- HTML
- 特定の文字列を挿入
テーブルのセルに特定の文字列を挿入する方法は御座いませんか？ 例えば、 ＨＴＭＬファイル <html> <head> </head> <body> <table> <tr><td> (1) </td><td> (2) </td></tr> <tr><td> (3) </td><td> (4) </td></tr> </table> </body> </html> とあった場合 JavaScriptファルには (1)に挿入する内容 (2)に挿入する内容 (3)に挿入する内容 (4)に挿入する内容 を書いてHTMLファイルに書き出しをしたいのです。 document.write('');を使って書き出す方法は知っていますが、指定した場所に貼り付けたい場合複数ファイルが必要になりますよね？ それでは不便なので、JavaScriptファルは外部化で１つのファイルにし、指定箇所に文字列を挿入する方法を教えてください。 printを使えばいいんでしょうか？
- ベストアンサー
- JavaScript
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- テーブル<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
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- javascript でテーブル操作
javascriptのdeleteRowで削除したテーブルの行を再表示する方法を探しております。 下記ソース内reload.gifをクリックするとdeleteRowで消えた行をまとめて表示したいのですが何か良い方法は無いでしょうか？ (＊)ブラウザの再表示は使えません。 <html> <head> <title></title> <script language="JavaScript" type="text/JavaScript"><!-- function Delline(tablename,num){ document.getElementById (tablename).deleteRow(num); } //--></script> </head> <body> <img src="reload.gif"> <table id="table1"> <tr onmouseover="asrow1 = this.rowIndex"> <td class="ChkTD41">ああ<img src="del.gif" onclick="Delline('table1',asrow1)" /> <input type="text" name="a1"> </td> </tr> <tr onmouseover="asrow2 = this.rowIndex"> <td class="ChkTD41">いい<img src="del.gif" onclick="Delline('table1',asrow2)" /> <input type="text" name="b1"> </td> </tr> <tr onmouseover="asrow3 = this.rowIndex"> <td>うう<img src="del.gif" onclick="Delline('table1',asrow3)" /> <input type="text" name="c1"> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- tableタグについて
どのようのウィンドー幅になっても全ての文字が表示させたいのですが、以下のタグの何処がおかしいのでしょうか。 <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div align=center> <table width="700"> <tr> <td>あいうえお・かきくけこ・さしすせそ</td> </tr> </table> </div> </td> </tr> </table> この場合、ウィンドー枠を右から左に向かって縮小していくと、「あいうえお・かきくけこ・さしすせそ」の”そ”から順に見えなくなります。 そのではなくて、 あいうえお かきくけこ さしすせそ になり、 さらに縮小すると あい うえ おか かき くけ こさ しす せそ の様な感じで すべてが表示されるようにしたいのですが、どのようなタグを挿入すれば良いのでしょうか？ お願いします。
- ベストアンサー
- ホームページ作成ソフト
- TABLEタグの幅指定
テーブルの幅を厳密に指定したいのですが、 例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
お礼
お礼が遅くなって申し訳ございません。 希望通りの動作が実現すると共に、大変勉強になって感謝しています。ありがとうございました。