• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:記述方法について)

記述方法について

このQ&Aのポイント
  • 前回教えていただいたソースを基に表示するテーブルの並び方を変えたい。
  • 読み込んだエクセルのレコードを2列ずつにして表にしたい。
  • 試した結果、ブラウザ上に何も表示されない。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.5

============Q3195373-4.html======== <!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" xml:lang="ja" lang="ja"> <head> <title>Q3195373 テストケース4</title> <script type="text/javascript" src="Q3195373-4.js"></script> <style type="text/css"> table{ border-collapse:separate; } table,tbody,tr,th,td{ border-style:solid; } </style> </head> <body onload="hoge(2);"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> ==========Q3195373-4.js========= function hoge(column1){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; var index = 1; /* 最初に全データを格納してしまう */ while (!rs.EOF){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ tds[rs.fields.count * index - i ] = document.createElement("td"); tds[rs.fields.count * index - i ].appendChild(document.createTextNode(rs.fields(rs.fields.count - i - 1))); } index = index + 1; rs.MoveNext; } index = index - 1; /* 必要な行数を求める */ var max = row(index * rs.fields.count,column1,rs.fields.count); /* 行が丁度で終わるかどうか。終わらないとtrue */ var flag = (index % column1 != 0); /* 行数が求まったところで配列を初期化。位置を決めていく順序の関係で,先に作っておく */ var trs = new Array(max+1); for ( var i = 1;i < max+1 ;i++){ trs[i] = document.createElement("tr"); } /* 順番にしきつめていく*/ for ( var i = 1;i <= rs.fields.count * column1 * Math.floor(index / column1) ;i++){ trs[row(i,column1,rs.fields.count)].appendChild(tds[i]); } /*行が終わらなかったとき */ if (flag){ for (var j = 1 ; j <=rs.fields.count;j++){ /* 余った分を行内に配置して */ for(var k = 1;k <= index % column1;k++){ trs[row(rs.fields.count * column1 * Math.floor(index / column1) + j,column1,rs.fields.count) ].appendChild(tds[rs.fields.count * column1 * Math.floor(index / column1) + rs.fields.count * (k-1) + j ]); } /* 行に足りなかった分を補う */ for(var k = index % column1 + 1;k <= column1 ;k++){ var newtd = document.createElement("td"); var newtext = document.createTextNode(" "); newtd.appendChild(newtext) trs[row(rs.fields.count * column1 * Math.floor(index / column1) + j,column1,rs.fields.count) ].appendChild(newtd); } } } /* 全ての行の処理が終わったらtbodyへの追加*/ for ( var i = 1;i <= max ;i++){ tbody.appendChild(trs[i]); } /* tableに追加して */ table.appendChild(tbody); /* 出力エリアに追加 */ output.appendChild(table); } function row(N,column,fieldcount){ var group = Math.floor((N-1)/(fieldcount * column)); return fieldcount * group + ((N-1) - fieldcount * column * group) % fieldcount + 1; }

hajimete-san
質問者

お礼

himajin100000さん、ありがとうございます。 無事動きました。 本当に感謝致します。 himajin100000さんのソースを前回のものと見比べて 色々勉強します。 本当に助かりました、ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (4)

回答No.4

自信ないので2パターン示す =================--Q3195373-3.html================== <!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" xml:lang="ja" lang="ja"> <head> <title>Q3195373 テストケース3</title> <script type="text/javascript" src="Q3195373-3.js"></script> </head> <body onload="hoge();"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> =============Q3195373-3.js================ function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; var index = 1; while (!rs.EOF){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ tds[rs.fields.count * index - i ] = document.createElement("td"); tds[rs.fields.count * index - i ].appendChild(document.createTextNode(rs.fields(rs.fields.count - i - 1))); } index = index + 1; rs.MoveNext; } index = index - 1; for (i = rs.fields.count - 1;i>=0;i-- ){ trs[rs.fields.count-i-1] = document.createElement("tr"); for(j = rs.fields.count - i;j <= 3 * index ;j=j+rs.fields.count){ trs[rs.fields.count-i-1].appendChild(tds[j]); } } for (var i = 0;i <= trs.length - 1 ;i++ ){ tbody.appendChild(trs[i]); } table.appendChild(tbody); output.appendChild(table); }

全文を見る
すると、全ての回答が全文表示されます。
回答No.3

Q3195373-2.js function hoge(count){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; var index = 1; while (!rs.EOF){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ tds[rs.fields.count * index - i ] = document.createElement("td"); tds[rs.fields.count * index - i ].appendChild(document.createTextNode(rs.fields(rs.fields.count - i - 1))); } if (index % count == 0){ trs[index / count - 1] = document.createElement("tr"); for (var j = count - 1;j >= 0 ;j--){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ trs[index / count - 1].appendChild(tds[rs.fields.count * index - rs.fields.count * j - i]); } } } index = index + 1; rs.MoveNext; } index = index - 1; if (index % count != 0){ trs[Math.floor(index / count)] = document.createElement("tr"); for (var j = (index % count) - 1;j >= 0 ;j--){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ trs[Math.floor(index / count)].appendChild(tds[rs.fields.count * index - rs.fields.count * j - i]); } } index = Math.ceil(index / count) * count; } for (var i = 0;i <= index / count - 1 ;i++ ){ tbody.appendChild(trs[i]); } table.appendChild(tbody); output.appendChild(table); } Q3195373-2.html <!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" xml:lang="ja" lang="ja"> <head> <script type="text/javascript" src="Q3195373-1.js"></script> </head> <body onload="hoge(2);"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> Q3195373-2.csv Q3195373-1.csvと同じく 正直二次元配列使えばもっと簡単にできた気がする。 hoge関数の引数で 何レコードをセットにするか決定できる。 今回は2レコードがセットなので2が指定されている

hajimete-san
質問者

お礼

himajin100000さん、無事理想の動きが出来るようになりました。 ありがとうございました。 もうひとつ質問があります。上記のソースをもとに 今の動きですと、 a1-1 a1-2 a1-3 b2-1 b2-2 b2-3 c3-1 c3-2 c3-3 d4-1 d4-2 d4-3 というようにエクセルデータの行をそのまま横ですが、これを a1-1 b2-1 a1-2 b2-2 a1-3 b2-3 のように、縦に表示というのは可能でしょうか? 面倒な質問をして申し訳ありません。自分のほうでも 色々記述してみてるのですが、うまく行かず状態で・・。 また再度がんばってみます。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

ソースコードに汎用性を持たせるために作業中です。 しばらくお待ちください

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

Q3163593のhimajin100000です。 HTMLの完成予想図をきちんと頭の中で想像してください。 前回のサンプルを使います。 Q3195373-1.csv 'img','name','phone' 'img/a01.jpg','a01','001-001' 'img/a02.jpg','a02','002-002' 'img/a03.jpg','a03','003-003' 'img/a04.jpg','a04','004-004' 'img/a05.jpg','a05','005-005' 'img/a06.jpg','a06','006-006' 'img/a07.jpg','a07','007-007' 'img/a08.jpg','a08','008-008' 'img/a09.jpg','a09','009-009' Q3195373-1.html <!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" xml:lang="ja" lang="ja"> <head> <script type="text/javascript" src="Q3195373-1.js"></script> </head> <body onload="hoge();"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> Q3195373-1.js function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); var headercount = 3; TEST.Reset(); var rs = TEST.recordset; var index = 1; while (!rs.EOF){ tds[3 * index - 2] = document.createElement("td"); tds[3 * index - 1] = document.createElement("td"); tds[3 * index] = document.createElement("td"); tds[3 * index - 2].innerText = rs.fields(0); tds[3 * index - 1].innerText = rs.fields(1); tds[3 * index].innerText = rs.fields(2); if (index % 2 == 0){ trs[index / 2] = document.createElement("tr"); trs[index / 2].appendChild(tds[3 * (index-1) -2] ); trs[index / 2].appendChild(tds[3 * (index-1)-1] ); trs[index / 2].appendChild(tds[3 * (index-1)-0] ); trs[index / 2].appendChild(tds[3 * index -2 ] ); trs[index / 2].appendChild(tds[3 * index -1 ] ); trs[index / 2].appendChild(tds[3 * index -0 ] ); } index = index + 1; rs.MoveNext; } if (index % 2 == 0){ trs[index / 2] = document.createElement("tr"); trs[index / 2].appendChild(tds[3 * (index-1) - 2] ); trs[index / 2].appendChild(tds[3 * (index-1) - 1] ); trs[index / 2].appendChild(tds[3 * (index-1) - 0] ); } for (var i = 1;i <= index / 2;i++ ){ tbody.appendChild(trs[i]); } alert(tbody.getElementsByTagName("tr").length); table.appendChild(tbody); output.appendChild(table); }

hajimete-san
質問者

お礼

himajin100000さん、前回同様書き込みありがとうございます。 早速試してみたいと思います。 ソースを記述する際、ご指摘どおり、予想しながら やってるのですが、まだまだですね、もっと勉強します。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • borderの指定方法

    var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか? どなたか教えてください。 よろしくお願いします。

  • color 属性が追加できない

    <html><meta><script language="javascript"><!-- tr = document.createElement("tr"); tr.setAttribute("bgcolor", "black"); td = tr.appendChild(document.createElement("td")); td.appendChild(document.createTextNode("test")); tbody1.appendChild(tr); //--></script></head><body> <table><tbody id="tbody1"></tbody></table> </body></html> というソースなのですが,実行してもセルの背景が黒く塗りつぶされません。 setAttribute("width", "100px")などはきちんと適用されるのですが・・・。 setAttribute("style", "background-color: black;")としてもダメでした。 どのようにすればよいのでしょうか。 よろしくお願いします。

  • javascriptでカレンダーを作る方法

    下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1~30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか? <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>

  • DOM? tableの記述について

    よろしくお願いします。 tbody内をループさせて表示させるスクリプトを作ってみました。 ここで質問なのですが、表示内容を横にできるのでしょうか? イメージとしては・・ A01 A02 A03 B01   B02 B03 を以下のように A01 B01 A02 B02 A03 B03 no のようにしたいのです。 ただのHTMLなら <html> <head> <title>test</title> </head> <body> <table border=0> <tr> <td> <table border=0> <tr><td>A01</td></tr> <tr><td>A02</td></tr> <tr><td>A03</td></tr> </table> </td> <td> <table border=0> <tr><td>B01</td></tr> <tr><td>B02</td></tr> <tr><td>B03</td></tr> </table> </td> </tr> </table> </body> </html> みたいな感じでできると思うんですが、以下のソースだと どうしても表示されなくなります。どこをどうすると よろしいでしょうか?どうかよろしくお願いします。 ------------------------------------------------- <html> <head> <title>TABLE TEST</title> <script> function tsample() { var mybody=document.getElementsByTagName("body").item(0); mytable = document.createElement("TABLE"); mytr = document.createElement("TR"); mytablebody = document.createElement("TBODY"); for(j=0;j<4;j++) { mycurrent_row=document.createElement("TD"); mytablet =document.createElement("TABLE"); for(i=0;i<3;i++) { mycurrent_cell=document.createElement("TR"); mycurrent_cen=document.createElement("TD"); currenttext=document.createTextNode("NO "+j+" LNO "+i+" "); mycurrent_cen.appendChild(currenttext); mycurrent_cell.appendChild(mycurrent_cen); } mycurrent_row.appendChild(mytablet); mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytr); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body onload="tsample()"> </body> </html>

  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

  • 動的に作成したテキストボックスの値をaspへ

    いつもお世話になっております。 javaスクリプトで動的にテキストボックスを作成し、 実行ボタンを押すと値をhiddenでtest.aspへ渡すことは可能でしょうか? 不可能であれば。。。。 test.aspへ値を渡す良い方法がありましたら、ご教示くださますようお願いいたします。 環境:IIS7.5 クラッシックASP 以下、ソースを参照してください。。。 *自宅では環境がないため、 印刷を見ながら手で入力しました。 確認して投稿しましたが。。。打ち間違い等あったらご指摘くださいませ>< --------以下ソース抜粋 addtext.asp ------------------- <script language="JavaScript"> <!-- function addDev(){ var targetName; var idObj; var tbObj; var devBlockCnt; idObj = document.getElementById("histTablebody"); tdObj = idObj.getElementsByTagName("tbody"); devBlockCnt++; targetName = "devBlock" + devBlockCnt; var mybody = document.getElementById("histTablebody"); tbcurrent_row = document.createElement("TBODY"); tbcurrent_row.setAttribute("id",targetNam); mycurrent_row=document.createElement("TR"); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); tbcurrent_row.appendChild(mycurrent_row); mycurrent_row=document.createElement("TR"); mycurrent_row.setAttribute("id",histrow1); mycurrent_cell=document.createElement("TD"); mycurrent_form=document.createElement("INPUT"); mycurrent_form.setAttribute("type","TEXT"); mycurrent_form.setAttribute("name","devEntry1"); mycurrent_form.setAttribute("id","devEntry1"); mycurrent_form.setAttribute("value",""); mycurrent_cell.appendChild(mycurrent_form); mycurrent_row.appendChild(mycurrent_cell); tbcurrent_row.appendChild(mycurrent_row); mybody.appendChild(tbcurrent_row); } //--> </script> <html> <head> <title>TEST</title> </head> <body> <div align="center"> <table border="1"> <tr> <td align="left" valign="middle">入力1</td> <td> <form name="fmDev"> <div> <table border="0" id="histTablebody"> <tbody id="devBlock1"> <tr><td></td></tr> <tr id="histrow1"> <td><input type="text" name="devEntry1" id="devEntry1"> </td> </tr> </tbody> </table> </div> <table> <tr><td><input type="button" id=addDevid value="追加" onClick="addDev();"> </td> </tr> </table> </form> </td> </tr> <form name="fmHoki"> <tr> <td align="left" valign="middle">入力2</td> <td align="left"><textarea row="5" name="hokiTXT" cols="60"></textarea></td> </tr> </form> </table> </div> <teble border="0"> <tr> <form action="test.asp" method="post" name="fm2"> <tr><input type="submit" value="登録実行" alt=""></td>     <input trype="hidden" name="hokiTXT"> </form> <form name="fm3"> <td><input type="button" value="戻る" onclick="location.href='menu01.asp';"></td> </form> </tr> </teble> </body> </html> <SCRIPT LANGUAGE="vbscript"> '--------------------------------------- ' test.asp へ行く前の処理 '--------------------------------------- Sub fm2_OnClick() Dim i Document.fm2.hokiTXT.value = Document.fmHoki.hokiTXT.value  '--ここで動的に作成したテキストボックスの値をtest.aspへ渡す処理が  'わかりません。。。。。  'debug確認用 ↓ for i=0 to document.fmDev.length msgbox document.fmDev.element(i).name,,"test" msgbox document.fmDev.element(i).value,,"test" next End Sub </SCRIPT>

  • テーブルにおける行(セルにプルダウン含む)の追加方法

    追加ボタンを押度に,テーブルに1行ずつ追加されるプログラムを組んでいるのですが,追加ボタンを押しても何も起こりません.1行には,テキストボックスとプルダウンメニューの2つのセルが含まれます.テキストボックスのみであれば,追加に成功します. プルダウンのメニュー項目の追加方法ではなく,プルダウン自体を複製して追加していきたいのですが,参考サイトが見つかりませんでした.また,各行を識別する為一意の名前をつけたいのですが,どう記述したらよろしいでしょうか. お手数おかけしますが,下記ソースのどこが間違っているのか,どう処理すべきなのかを,ご教示頂けますでしょうか.お願い致します. <BODY> <TABLE id="Table1"> <TR> <td class="cellWhite"><input type="text" value="単語入力" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"></td> <td bgcolor="#5096C9" width="113px"> <select name="column"> <option value="00">赤</option> <option value="01">青</option> <option value="02">黄</option> </select></td></tr></TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <script language="JavaScript"> function addRow() {  var tbl = document.getElementById("Table1").firstChild;  if (!tbl.tagName) {    tbl = document.getElementById("Table1");}  var tr = document.createElement("tr");  var td1 = document.createElement("td");  td1.setAttribute("class","cellWhite");  var tx1 = document.createElement("input");  tx1.setAttribute("type","text");  tx1.setAttribute("value","単語入力");  tx1.setAttribute("onFocus","cText(this)");  tx1.setAttribute("onBlur","sText(this)");  tx1.setAttribute("style","color:#999");  td1.appendChild(tx1);  var td2 = document.createElement("td");  var selectName="column";//selectの名前  var options={0:"赤",1:"青",2:"黄"};  var c=sel.firstChild;  while(c){   if(c.name==selectName) sel.removeChild(c);     c=c.nextSibling;}   var e=document.createElement("select");   e.setAttribute("name",selectName);   for(var i in options){     var o=document.createElement("option");     o.setAttribute("value",options[i]);     o.appendChild(document.createTextNode(options[i]));     e.appendChild(o);}   sel.appendChild(e);   tr.appendChild(td1);tr.appendChild(td2);tbl.appendChild(tr);}</script> 参考にしたサイトです: http://oshiete1.watch.impress.co.jp/qa4074195.html http://okwave.jp/qa299889.html

  • appendChildとinnerHTMLを短く

    テーブルのthタグと内容を追加したい ・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです ・どうすれば良いでしょうか? var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……

  • javascript でリンクを動的に変更する方法

    下記のようなシステムを作成をしようと思っています。 javascript がまだあまり理解していない為ご教授いただければ幸いです。 質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。 下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。 <a href="#" onClick="window.open('store1.php?from=js&amp;no=「この部分」','search_store1','width=540,height=540')">検索</a> 宜しくお願い致します。 サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript"> <!-- var i = 1; var maxrows = 10; function hage() { i++; // Tbody への参照を取得します var mybody=document.getElementById("histTablebody"); mystore_row=document.createElement("TR"); mystore_row.setAttribute("id","histrow"+i); mystore_cell=document.createElement("TD"); mystore_cell.setAttribute("id","num"); currenttext=document.createTextNode(i); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); currenttext=document.createTextNode("店舗ID"); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_id" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_form=document.createElement("INPUT"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_name" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); //mystore_cell=document.createElement("a"); mystore_row.appendChild(mystore_cell); mybody.appendChild(mystore_row); document.register.delrow.disabled=false; if(i>=maxrows){ document.register.addrow.disabled=true; } } var hige = function() { var mytable=document.getElementById("histTablebody"); var removeTable=document.getElementById("histrow"+i); mytable.removeChild(removeTable); i--; if(i==1){ document.register.delrow.disabled=true; } // 追加ボタンを有効にする document.register.addrow.disabled=false; } var result = function() { alert(''); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td id="num">1</td> <td>店舗ID</td> <td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td> <td> [<a href="#" onClick="window.open('store1.php?from=js&amp;no=[]','search_store1','width=540,height=540')">検索</a>] </td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id=addrow value="行を追加" onClick="hage();"> </td> <td> <input type="button" id=delrow value="行を削除" onClick="hige();" disabled="true"> </td> <td> <input type="button" value="登録" onClick="result()"> </td> </tr> </table> </form> </body> </html>

  • greasemonkeyでfunction動かない

    greasemonkeyでスクリプトを作成したいのですが、テスト用に書いたjavascriptをぐれもんに設定したところ、スクリプトが起動しなくなりました。 ※javascript、greasemonkey共に初心者です。 ご指摘いただけると幸いです。 HTML部分は、既存のサイトにつき変更できないため、ぐれもん(JS)にて、追加機能を持たせたい。 ======= 作成したサンプルソース JSで作成した、最下部の入力文字を発送日窓複数に一括反映するためのスクリプトです。 ======= <SCRIPT LANGUAGE="JavaScript"> <!-- window.onload=function(){ var myForm=document.createElement('form'); myForm.setAttribute("name","frm_test2"); var inps=new Object; inps[0]=document.createElement('input'); inps[0].setAttribute("type","text"); inps[0].setAttribute("name","atai"); inps[0].setAttribute("value",""); inps[1]=document.createElement('input'); inps[1].setAttribute("type","button"); inps[1].setAttribute("onClick",'test()'); inps[1].setAttribute("value","実行"); for(var i in inps){ myForm.appendChild(inps[i]); } document.body.appendChild(myForm); } function test(){ num = document.rjForm2.length for (var i=0; i<num; i++){ formname = document.rjForm2[i].name; formname=formname.substring(0,13); if (formname=="shipping_date"){ document.rjForm2[i].value = document.frm_test2.atai.value; } } } //--> </SCRIPT> <body> <form name="rjForm2"> <table> <tr> <td> <input type="text" name="shipping_date_123456-12345678-123456781">発送日 </td> </tr> <tr> <td> <input type="text" name="pay_date_123456-12345678-123456781">振込日 </td> </tr> </table> <table> <tr> <td> <input type="text" name="shipping_date_123456-12345678-123456785">発送日 </td> </tr> <tr> <td> <input type="text" name="pay_date_123456-12345678-123456785">振込日 </td> </tr> </table> </form> </body> ====== 上記JS部分を以下のようにgreasemonkeyに反映した経緯と、結果 ・サイトで見つけたサンプルを元にwindow.onloadの前後は、()を使ったら、この部分は、実行できた。 ・しかし、function test部分は、()を使ってもできず、firebugでは、「test is not defined」と出て、発送日窓に一括登録ができない。 ====== 以下、greasemonkeyに設定したスクリプト ( window.onload=function(){ var myForm=document.createElement('form'); myForm.setAttribute("name","frm_test2"); var inps=new Object; inps[0]=document.createElement('input'); inps[0].setAttribute("type","text"); inps[0].setAttribute("name","atai"); inps[0].setAttribute("value",""); inps[1]=document.createElement('input'); inps[1].setAttribute("type","button"); inps[1].setAttribute("onClick",'test()'); inps[1].setAttribute("value","実行"); for(var i in inps){ myForm.appendChild(inps[i]); } document.body.appendChild(myForm); }()); function test(){ num = document.rjForm2.length for (var i=0; i<num; i++){ formname = document.rjForm2[i].name; formname=formname.substring(0,13); if (formname=="shipping_date"){ document.rjForm2[i].value = document.frm_test2.atai.value; } } } ======= 何卒よろしくお願いいたします。

このQ&Aのポイント
  • 外付けハードディスクのアクセスLEDランプがオフの状態でも点灯している問題について質問があります。
  • 製品名は「SGD-MX040UBK」です。テレビの電源がオフの状態でもアクセスLEDランプが点灯し続ける現象が発生しています。
  • 質問内容を簡単にまとめると、SGD-MX040UBK外付けハードディスクのアクセスLEDランプが点灯し続ける問題についての対処法を教えてください。
回答を見る

専門家に質問してみよう