- ベストアンサー
特定の文字列を挿入
テーブルのセルに特定の文字列を挿入する方法は御座いませんか？ 例えば、 ＨＴＭＬファイル <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を使えばいいんでしょうか？
- ryupyon
- お礼率33% (48/142)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
いちばん簡単なのはtdにidを振ることかなぁ <html> <head> <script> window.onload=function(){ document.getElementById("td1").innerHTML="1の変化後"; document.getElementById("td2").innerHTML="2の変化後"; document.getElementById("td3").innerHTML="3の変化後"; document.getElementById("td4").innerHTML="4の変化後"; } </script> </head> <body> <table> <tr><td id="td1">(1)</td><td id="td2">(2)</td></tr> <tr><td id="td3">(3)</td><td id="td4">(4)</td></tr> </table> </body> </html>
その他の回答 (2)
セルの内容の指定をわかりやすく、こんな感じでどうでしょう。 --- <html> <head> <script type="text/javascript"><!-- window.onload = function(){ var content = [ ['(1)->(a)', '(2)->(b)'], // 1行目 ['(3)->(c)', '(4)->(d)'] // 2行目 ]; var tbl = document.getElementById('tbl'); var numOfRows = tbl.getElementsByTagName('tr').length; var numOfCells = tbl.getElementsByTagName('tr')[0].getElementsByTagName('td').length; for (var i = 0; i < numOfRows; i++) { for (var j = 0; j < numOfCells; j++) { var cell = tbl.getElementsByTagName('tr')[i].getElementsByTagName('td')[j] cell.firstChild.nodeValue = content[i][j]; // この行をコメントアウトすれば変更前の表が表示されます } } }; // --></script> </head> <body> <table id="tbl"> <tr><td> (1) </td><td> (2) </td></tr> <tr><td> (3) </td><td> (4) </td></tr> </table> </body> </html>
補足
早速回答ありがとうございます。 こちらの場合ちょっと複雑なテーブルになるとJavaScriptの方が大変そうですね＾＾；なので、今回はＮｏ２さんのを参考にさせていただく事になりました。
- fujillin
- ベストアンサー率61% (1594/2576)
こんな雰囲気のことでしょうか？ <html> <head> <script> function change(){ var td = document.getElementById('test').getElementsByTagName('td'); for (var i=0; i<td.length; i++){ // 順番にｎ番目のtdはtd[n-1] :（添字は0からスタート） td[i].innerHTML = (i+1)+"番を<br>変えてみました"; } } </script> </head> <body> <table border=1 id="test"> <tr><td> (1) </td><td> (2) </td></tr> <tr><td> (3) </td><td> (4) </td></tr> </table> <p> <input type="button" onclick="change()" value="変更テスト"> </body> </html>
補足
早速回答ありがとうございます。 求めてたのとちょっと違いました。 ボタンは付けるわけではなくただ単にJavaScriptに入力した内容をＨＴＭＬに飛ばして表示したかったんですよ。 なので、今回はＮｏ２さんのを使う事にしました。
関連するQ&A
- 特定の文字列に囲まれた文字列を複数同時に抽出したい
ホームページのソースの中から特定の文字列(タグ含む)に囲まれた文字を 複数同時にテキストファイルに抽出したいです。 例えば <table><tr><td width="100">い</tr></table> <table><tr><td width="88">ろ</tr></table> <table><tr><td width="55">は</tr></table> <table><tr><td width="100">にほ</tr></table> <table><tr><td width="55">へと</tr></table> とあった場合、「width="100">」と「</tr>」を指定して、 「い」と「にほ」をテキストファイルに書き出したいです。 何か良いソフトはないでしょうか？
- 締切済み
- その他(ソフトウェア)
- 特定の文字列を取り出したい
秀丸エディタの正規表現などを使えば可能だと思うのですが、 あるファイルに以下のような記述があったとして <table><tr> <td>abc1@abc.jp</td> <td>abc2@abc.jp</td> <td>abc3@abc.jp</td> <td>abc4@abc.jp</td> </tr></table> タグの中身の文字列だけを取り出して abc1@abc.jp abc2@abc.jp abc3@abc.jp abc4@abc.jp というテキストを作りたいのですが、 何か良い方法はありますでしょうか？
- 締切済み
- その他(ソフトウェア)
- フォームに入力した文字を挿入して出力する方法
フォームに入力した文字を挿入して出力する方法 JavaScript初心者です。 複数のフォームに入力した文字をタグなどに挿入して、 テキストエリアに出力するにはどうしたらいいのでしょうか？ ↓出力例 <table> <tr><td><a href="あああ">いいい</a></td></tr> <tr><td><a href="あああ">ううう</a></td></tr> （改行） <tr><td><a href="えええ">いいい+ううう</a></td></tr> </table> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- HTML table内文字のonclick抑止
HTMLの書き方について質問です。 tableのtdにonclick処理を設定し、 さらに、そのtd内の文字列にもonclick処理を設定したいのですが、 文字列をクリックしたときに、同時にtdに設定したonclick処理も実行されてしまいます。 文字列をクリックしたときは、その文字列に設定してある処理だけ実行するようにはできないのでしょうか？ 具体的なサンプルは下記の通りで、 text_funcだけを実行させたいのです。 ---------------------- <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function td_func(){ 折りたたまれている文字を表示する処理; } function text_func(){ TD（セル？）の背景色を変える処理; } //--> </script> </head> <body> <table border="1"> <tr> <td style="padding:10px;" onclick="td_func()"> <a href="#" onClick="text_func();return false;">test_td</a> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- <td>中の文字列に<p>は必要?
テーブルの<td></td>タグ中の文字列は、<p></p>タグで囲むべきでしょうか? <p></p>タグで囲まない場合の例： <body> <table border="4" width="250"> <tr> <td align="left"> ここの文字について質問しています。 </td> </tr> </table> <p></p>タグで囲む場合の例： <body> <table border="4" width="250"> <tr> <td align="left"> <p> ここの文字について質問しています。 </p> </td> </tr> </table> </body> どちらが、良いのでしょう? よろしくお願いします。
- ベストアンサー
- HTML
- ２列目のみcssを適用させるには？
<html> <head> <title>test</title> <style type="text/css"> table.test td+td { padding-left:1em; } </style> </head> <body> <table class="test" border=1> <tr><th>No</th><th>タイトル(この列だけ左からの距離を指定する)</th><th>その他</th></tr> <tr><td>1</td><td>bbb</td><td>1</td></tr> <tr><td>2</td><td>ccc</td><td>2</td></tr> </table> </body> </html> このソースだと２列目と３列目にcssが適用されてしまいます。 table.test td+td の部分は、okwaveからのコピペで見よう見まねでやってみたのですが どうすれば「２列目だけ」を指定できますか？ このソースでの表示結果は画像の通りです。
- ベストアンサー
- HTML
- 一気に「テーブルの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
- HTMLの表で幅を指定しても折り返すことは無理なのでしょうか？
以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか？ <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>
- ベストアンサー
- HTML
- cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- HTML
- HTMLのテキストノード部分を変更するには？
<table> <tr><td>あああ<span>いいい</span></td></tr> </table> 上記のようなHTMLについて、 「あああ」のテキストノード部分のみを 「ううう」というように別の文字列へJavaScriptを用いて変更するには どのような方法が考えられるでしょうか？
- ベストアンサー
- JavaScript
お礼
早速回答ありがとうございます。 まさに私が求めていたものです。是非参考にさせていただきます。