- 締切済み
テーブルの変数について
var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。初心者なのでまだまだわからないことがたくさんありますがよろしくお願いします。
- hinematuri
- お礼率57% (4/7)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i</td> <td>data</td> </tr> </table> <script type="text/javascript"> //@cc_on var i; i=10; var tds = document.getElementsByTagName('td'); var cnt = 0; var td; var txt; while (td = tds[cnt++]) { txt = td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/; if ('i' === txt) td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/ = i; } </script> かいせつか？ ・・・。 かんたんにいえば、 var tds = document.getElementsByTagName('td'); が、じっこうされたとき、まだtableがよみこまれてないからね！ なので、すくりぷとは<body>のてまえじゃなくて、さいごにおくと よい。（</body>の手前） //@cc_on は、こめんとにおもえるかもしれないが、これもIEでのこーどのいちぶ。 IEと、そうでないぶらうざように、しょりをわけるためにつかってます td.innerText は、IE用。 td.textContent は、それ以外用で。 これを１ぎょうでかくと td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/; それと、このTDをけんさくして、あたいをおきかえするほうほうは、 じょうだんのつもりでかいたんだなぁ～ ほんらいなら、IDをふって、おきかえたほうが、よいとおもふ。 <td id="hoge">abc</td> document.getElementById('hoge').textContent = 'ABC'; もしくは、 document.getElementById('hoge').firstChild.nodeValue = 'ABC'; とか。
- yyr446
- ベストアンサー率65% (870/1330)
DOMでTABLEの中を全部検索してみた var i; i=10; var table=document.getElementById("table1"); for(var x in table.rows){ if(table.rows[x].cells!=null){ for(var y in table.rows[x].cells){ if(table.rows[x].cells[y].nodeName=="TD"){ if(table.rows[x].cells[y].innerHTML =="i"){ table.rows[x].cells[y].innerHTML = i; } } } } } ※babu_babooさんのようにTDの中身だけ探せばよかったのか。 IEだと innerTextでその他だとtextContentですね。
お礼
回答ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
tdのなかみをけんさくし、おきかえしてみた。^^; <script type="text/javascript"> var i; i=10; //@cc_on var tds = document.getElementsByTagName('td'); var cnt = 0; var td; var txt; while (td = tds[cnt++]) { txt = td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/; if ('i' === txt) td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/ = i; } </script>
補足
<html> <script type="text/javascript"> var i; i=10; var tds = document.getElementsByTagName('td'); var cnt = 0; var td; var txt; while (td = tds[cnt++]) { txt = td.textContent; if ('i' === txt) td.textContent = i; } </script> <body> <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i</td> <td>data</td> </tr> </table> </body> </html> 解答ありがとうございます。このように書いてみたのですが、だめでした。どこが悪いのか教えてもらえませんか。本当に全然知らなくてすいません
- yyr446
- ベストアンサー率65% (870/1330)
No.1の補足 PHP使いましょう javascriptだと <td>i<td> を見つけるのが結構めんどうですよ。 目印があれば、簡単ですが...
お礼
ありがとうございます。 参考になりました
- yyr446
- ベストアンサー率65% (870/1330)
<? php> $i; $i=10; <?> <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td><? php>$i<?><td> <td>data</td> </tr> </table>
関連するQ&A
- テーブルの変数について
var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。
- 締切済み
- JavaScript
- こういう構造のtableはできるでしょうか
HTML で、テーブルをこういう構造にすることは可能でしょうか。 ┏━━━━┳━━━━━━┳━━━━┳━━━┓ ┃見出し１┃○○○○○○┃見出し２┃○○○┃ ┣━━━━╋━━┳━━━┻━━━━╋━━━┫ ┃見出し３┃○○┃少し長い見出し４┃○○○┃ ┗━━━━┻━━┻━━━━━━━━┻━━━┛ ↓こんな感じでできないかなと思ったのですが、できませんでした。(win7/IE10) <table border="1"> <tr> <th>見出し１</th><td colspan="2">○○○○○○</td> <th>見出し２</th><td>○○○</td> </tr> <tr> <th>見出し３</th><td>○○</td> <th colspan="2">少し長い見出し４</th><td>○○○</td> </tr> </table> ※インデントは全角スペースになっています ---------- １） 対象ブラウザは IE8～IE10 できればchrome等でも対応できたほうが良いのですが、最低限IEで表示できれば良いです。 ２) カラムの width 等を指定することなく左端や右端を揃えたいです。 ２の条件がなければ float とかも考えたのですが… どなたか良い方法をご存知の方がいらっしゃいましたら教えて下さい。 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- テーブルについて教えてください
テーブルについて教えてください <table border="1"> <tr> <th colspan="3">見出し</th> </tr> <tr> <th>1</th> <td rowspan="3">A</td> <td rowspan="3">B</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> </table> |---------------------| |------|---------------| |------| | |------| | |------|--------------| 絵が少しおかしいかも知れませんが・・・上の絵のような感じのテーブル枠になると思います 下の絵のように上の物の一番下にもう一列、縦割していない物を追加したいのですが、どうすればいいでしょうか？ 別に新たにテーブルを作ると切れ目が出来てしまうのでできればそれは避けたいです |---------------------| |------|---------------| |------| | |------| | |------|--------------| |---------------------| よろしくお願いします
- ベストアンサー
- HTML
- innerHTMLでのテーブル作成
いつもお世話になっております。 こちらの質問と回答を参考にプログラムを付け足して、リストを作る練習をしています。 http://okwave.jp/qa/q8090793.html テーブル行の先頭に項目名を表示させて、表を分かりやすくしようと思ったのですが、 最後に出力される項目名がそれまでの項目名を上書きしてしまい、 項目名が1個しか表示されないため、テーブルがずれて表示されてしまいます。 50個 金額～～ 100個 金額～～ と表示させるためには、どこを手直ししたら良いのか知恵を貸してください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innnerHTMLで自動生成された表を出力したい</title> <style> h2 { margin-bottom:0; color:#900;} table{ border:none; font-size:12px;} table tr th{ padding:5px; width:90px; background:#69F;} table tr td{ padding:5px; text-align:right; background:#9CF;} </style> <script type="text/javascript"> //ラジオボタンのvalue値を取得 var daysRate; var nouki = document.getElementsByName('nouki'); var price = new Array ( 10, 30, 50 ); function getRate() { for ( var i = 0; i < nouki.length; i ++ ) { if ( nouki[i].checked ) { daysRate = nouki[i].value; }}return parseFloat(daysRate);} function calc() { // 選択されているレートを取得 var rate = getRate(); var list_name = new Array('<h2>表1</h2>','<h2>表2</h2>','<h2>表3</h2'); var table_start = "<div><table><tbody>"; var table_head = '<tr><th>入数</th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr>'; var table_kosuu = ""; var table_td = ""; var table_end = "</tbody></table></div><hr />"; // priceが増えてもロジックをいじる必要がないようにprice.lengthでループ数を制御 for(var i=50; i<=100; i+=50){ if(i==50){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } if(i==100){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } document.getElementById('priceTableOutput').innerHTML = list_name[0] + table_start + table_head + table_kosuu + table_td; + table_end; } } window.onload = function() { // 読込み後も一度テーブル表示を実行する calc(); } </script> </head> <body> 再計算ボタンを押すと価格表が再計算されます。<br /> <input type="radio" name="nouki" value="1" checked="checked" />通常配達 <input type="radio" name="nouki" value="1.25" />翌日配達 <input type="radio" name="nouki" value="1.5" />当日配達 <input type="button" value="再計算" onClick="calc()"> <div id="priceTableOutput">innerHTMLで、ここに表を出力</div> <br /> </body> </html>
- ベストアンサー
- JavaScript
- テーブル列の表示／非表示機能の追加～その２
やりたい事は、AAAの列だけ常に表示させておき、BBB（つまり3列分）を表示／非表示になる・・といった事です。 下のHTMLで、変数bbbには「３」が入っているのは確認できましたが、後がさっぱり続きません。 どうぞよろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function hide(idName) { var aaa = document.getElementById(idName).childNodes; var bbb = aaa[0].length; alert(bbb); //--> </script> </head> <body> <button onClick="hide('list1')">隠す</button> <table border="1" cellpadding="2" cellspacing="1"> <tr> <th rowspan="3">AAA</th> <th colspan="3" id="list1">BBB</th> </tr> <tr> <th width="120">BBB1</th> <th width="120">BBB2</th> <th width="120">BBB3</th> </tr> <tr> <th>BBB11</th> <th>BBB21</th> <th>BBB31</th> </tr> <tr> <td>aaa</td> <td>aaa1</td> <td>aaa2</td> <td>aaa3</td> </tr> <tr> <td>bbb</td> <td>bbb1</td> <td>bbb2</td> <td>bbb3</td> </tr> <tr> <td>ccc</td> <td>ccc1</td> <td>ccc2</td> <td>ccc3</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
- 変数の疑問
プログラム初心者です 変数について教えてください 質問1 変数に代入する値の中で改行しても問題ないでしょうか？ while ($table = mysqli_fetch_assoc($recordSet)) { $cells .= "<tr> <td>{$table['id']}</td> <td>{$table['name']}</td> <td>{$upday}</td> </tr>".PHP_EOL; } 質問2 変数に格納できるものはなんでもありですか？関数も入りますか? こんなことはしないですが実験的にやってみたら表示されました $hoge = print "hoge"; 戻り値がないもの、この場合は、出力結果がはいるのでしょうか？ よろしくお願いします
- ベストアンサー
- PHP
- JS テーブルデータ：シャッフル関数の修正
JavaScript テーブルデータ：シャッフル関数の不具合を修正するには？ ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルする関数を作ってみました。 どこをどのように修正したらよいのでしょうか？ 今のところ、下記の不具合があります。 ■ 行のシャッフルは出来るが、列のシャッフルがされていない （すべてのＴＤ内のシャッフルをしたい） ＜仕様＞ ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button2">シャッフル</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> <script> //試作中 document.getElementById("button2").onclick = function (){ Array.prototype.shuffle = function(){ var t=this,a=t.length,b=[],c=a,i,r; for(i=0;i<a;i++)b[i]=t[i]; for(i=0;i<a-1;i++){ r=Math.floor(Math.random()*c); t[i]=b[r];b[r]=b[c-1];c--; } t[a-1] = b[0]; return t; }; var subject = document.querySelector("#table5 tbody"); var rowData = []; var rows = subject.getElementsByTagName("TR"); var cells; var i, j; for (i=0; i<rows.length; i++) { rowData[i] = []; cells = rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { rowData[i][j] = cells[j].innerHTML; } } rowData.shuffle(); for (i=0; i<rowData.length; i++) { cells=rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { cells[j].innerHTML = rowData[i][j]; } } } </script>
- ベストアンサー
- 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
お礼
思っていたとおりに動作しました。 とてもわかりやすい解説ありがとうございました