- ベストアンサー
テーブル自動生成スクリプトを作りたいのですが
http://blog.livedoor.jp/delta1138/archives/51560856.html 上のように、ブログにてFormula1の順位一覧をテーブルタグを利用してアップしているのですが、 いつもは毎回手書き(コピー&ペースト)で作ってました。 しかし、毎戦結果が違うわけで1回1回打ち直さなければなりません。 そして、段ずれやコピー間違いなどのミスも誘発してしまいます。 そこで、フォームに打ち込む、もしくはプルダウンメニューで中身を指定し、 ボタン1つでテーブルタグに変換してくれるスクリプトがあったらなと思いました。 HTML、CSSについてはある程度の理解があるのですが、JavaScriptに関しては全く知識がなく、 関連のホームページを見てもイマイチ理解が深まりませんでした。 具体的にどのようにしていいのかわからないのですが、まずどんなことから始めればいいんでしょうか？ 具体的な願望として、 ・最上段、最左列は全てTH、残りは全てTD ・内容なし(---を打ち込むまたは選択する)の場合、TDであるがセンター寄せになる ・最上段、最左列の文字は固定 があるとうれしいですね。 自力で調べろとか言われるかもしれませんが、ほんのちょっとしたことでもいいのでアドバイスをお願いします。
- delta1138
- お礼率78% (32/41)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
とりあえず、作ってみました。 （３位までと、ＲＥＴ３枠分しかありません。） http://chanfi.xsrv.jp/okwave/table.html RETの場合、予選・グリッドは'---'固定にしちゃいました。 RETの場合、DeltA予想に'---'を入れると、非表示になります。 teamList：チーム名を設定してください。 teamImageList：そのチームの画像のURLを入れてください。 driverList：ドライバー名を設定してください。 （teamList[]にdriverList[]が紐付きます） ※改造する場合 チーム、ドライバーを増やしたい場合、 htmlでの列数を増やして、 teamList、teamImageList、driverList setInputData()のinputData、setRetData()のretDataの配列数を増やし、 初期設定、処理の追加をしてください。 もっと良い方法があるかもしれませんので、 引き続き情報収集頑張ってください。
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
#2です。 凝ったつもりはなくて、 <div CONTENTEDITABLE>とするだけで内容が編集可能になるIEの機能を使うのが楽だと思ったので。 で、ご希望のイメージを具体化するのはちょっと面倒なのでワタシはパスです。 Javacsriptの基礎とDOMが理解できれば後は努力と根性だと思いますので頑張ってください。 http://www.tohoho-web.com/js/index.htm http://www.doraneko.org/misc/dom10/19981001/cover.html
お礼
そうだったんですか・・・ ありがとうございました。もう少し勉強してから自分でやってみます。 とは言いつつ、他の方のアドバイスをいただけるか待ってみたいので、質問を閉じるのを少々お待ちください。
- steel_gray
- ベストアンサー率66% (1052/1578)
勝手な仕様で作ってみました。 下記のサンプルソースのDIVの中に、現在のテーブルのソースをコピペ。 ただし、テーブルの1行目は <thead><tr>～～～</tr></thead> 2行目以降を <tbody><tr>～～～</tr><tr>～～～</tr>・・・</tbody> としておいてください。 htmlファイルをブラウザで表示したらテーブル部分を編集できます。 ・マウスで画像とテキストを選択後、移動やコピー可。 ctrl+c(コピー)やctrl+p（ペースト）あるいは(ctrl+)ドラッグ ・普通にテキストの入力も可（但し改行は shift+enter これ重要） 最後に完了ボタンで順位の自動付与、空行の削除、---のセルの中央寄せ等の整形後にソースが表示されます。 （IE専用です-結構手抜きなので変な動作をするかもしれません） <html> <head> <title></title> <script type="text/javascript"> var T; window.onload=function(){ T = document.getElementsByTagName('table')[0].tBodies[0]; } function addRows(r){ for(;r>0;r--){ var tr = document.createElement('tr'); tr.appendChild(document.createElement('th')); tr.appendChild(document.createElement('td')); tr.appendChild(document.createElement('td')); tr.appendChild(document.createElement('td')); T.appendChild(tr); tr.cells[0].innerHTML = 'RET'; tr.cells[1].innerHTML = '---'; tr.cells[2].innerHTML = '---'; tr.cells[3].innerHTML = ''; } } function init(){ for(var i=0;T.rows[i];i++){ if(T.rows[i].cells[1].innerHTML == '---') { T.deleteRow(i); i--; continue; } T.rows[i].cells[0].innerHTML = i+1; T.rows[i].cells[2].innerHTML = T.rows[i].cells[1].innerHTML.replace(/\d+\'\d+\.\d+<BR>/,''); T.rows[i].cells[3].innerHTML = ''; } } function fin(){ for(var i=0;T.rows[i];i++){ for(var j=1;T.rows[i].cells[j];j++) { if(T.rows[i].cells[j].innerHTML == '') T.rows[i].cells[j].innerHTML = '---'; if(T.rows[i].cells[j].innerHTML == '---') T.rows[i].cells[j].align = 'center'; else T.rows[i].cells[j].align = ''; } if(T.rows[i].cells[1].innerHTML == '---' && T.rows[i].cells[2].innerHTML == '---' && T.rows[i].cells[3].innerHTML == '---') { T.deleteRow(i); i--; continue; } if(T.rows[i].cells[1].innerHTML == '---') T.rows[i].cells[0].innerHTML = 'RET'; else T.rows[i].cells[0].innerHTML = i+1; } var srcCode = document.getElementsByTagName('div')[0].innerHTML; document.getElementById('result').value = srcCode; } </script> </head> <body> <div CONTENTEDITABLE> ここに現在のテーブルのソースを貼り付け </div> <p><input type="button" value="グリッド・順位のリセット" onclick="init()"></p> <p>空行を<input type="text" size="3" id="addRec" value="1">行<input type="button" value="追加" onclick="addRows(document.getElementById('addRec').value)"></p> <p><input type="button" value="完了" onclick="fin()"></p> <p><textarea id="result" cols="80" rows="20"></textarea></p> </body> </html>
お礼
回答ありがとうございます。大変参考になりました。 しかし、正直ここまで凝ったものじゃなくていいんですよ(苦笑) 私の個人的なイメージだと、 ・順位、RETは最初から決め値で(RETの数は20ぐらい、---など未選択時は非表示) ・画像、テキスト(ドライバー名等)は全てプルダウンメニューで選択(2人のドライバーにつき画像はある1種類と決まってるので、判別してくれればうれしいです) ・画像とドライバー名の間にタイムなどを書く1行フォームをそれぞれつけて欲しいです 本当にわがままで申しわけないんですが、もしお時間があればアドバイスお願いします。
<html> <body> <input type="button" value="Input" onClick="view()"><br/> <div id="a" style="display:none"><textarea id="b" cols="60" rows=10"> 順位,項目１,項目２,項目３ 1,abc,30%,10% 2,def,,5% 3,,10%,30% </textarea><br/> <input type="button" value="MakeTable" onClick="makeTable()"> </div> <div id="c"></div> <script> var caption="最上段、最左列の文字は固定は面倒なのでスルー"; function makeTable(){ ht='<table border="1"><caption>'+caption+'<caption>'; dt=$('b').value.split('\n'); for(y=0;y<dt.length;y++){ buf=dt[y].split(","); ht+='<tr>'; for(x=0;x<buf.length;x++){ if(x==0 || y==0) ht+='<th>'+buf[x]+'</th>'; else ht+='<td'+((!buf[x])?' style="text-align:center"':'')+'>'+((buf[x])?buf[x]:'--')+'</td>'; } ht+='</tr>'; } $('c').innerHTML=ht+'</table>'; } function view(){ if( $('a').style.display != 'none' ) $('a').style.display ='none'; else $('a').style.display ='block'; } function $(o){return document.getElementById(o);} </script> </body> </html>
お礼
回答ありがとうございます。参考になりました。
お礼
大変遅くなってしまって申し訳ありません。 試してみたところ、きちんと表示されるよう見受けられました。 本当にありがとうございました。