プログラミングを勉強し始めて2週間ほどです。
今、クリックする度に行が増える、というプログラムを
作りたいのですが、うまくいかずに困っています。
最初の1行はHTMLで作り、クリックするとその下に
100行表示され、さらに jun のところに
1~100の数字が表示される…というのが理想なのですが、
現段階では、
最初の1行の下に100行横に並んで出てきてしまいます。
しかも、クリックする度に100行横に並んで出てきます…
1行に4つセルが入っていて、4つのセルごとに改行されるのが理想です。(伝わりますかね…?)
さらに、いまのままだと無限に行が生成されるっぽいです…
HTML
1 2<table id="hyou" border="1" cellspacing="0" cellpading="0" onclick="fnc()"> 3 <thead> 4 <tr id="nakami"> 5 <td> aa </td> 6 <td> bb </td> 7 <td> cc </td> 8 <td> dd </td> 9 </tr> 10 </thead> 11 12 <tbody id="nakami2"> 13 </tbody> 14 15</table> 16
javascript
1 2var hyou=document.getElementById("hyou"); 3var nakami=document.getElementById("nakami"); 4var nakami2=document.getElementById("nakami2"); 5 6function fnc(){ 7var num=0; 8var jun=1; 9 10for(num; num<100; num++){ 11var tr=document.createElement("tr"); 12 13for(jun; jun<=100; jun++){ 14var td1=document.createElement("td"); 15td1.innerHTML=jun; 16tr.appendChild(td1); 17 18var td2=document.createElement("td"); 19td2.innerHTML="bb"; 20tr.appendChild(td2); 21 22var td3=document.createElement("td"); 23td3.innerHTML="cc"; 24tr.appendChild(td3); 25 26var td4=document.createElement("td"); 27td4.innerHTML="dd"; 28tr.appendChild(td4);} 29nakami2.appendChild(tr);} 30} 31
javascriptの nakami2.appendChild(tr); の位置を変えたり
追加する要素を行ではなくテーブルにしてみたりしましたが同じ結果でした…
今自分が持っている知識で作りたいので、ここにある要素やHTMLタグ以外は
あまり使いたくないです。もしこれがないと絶対に無理だから!という
ものがありましたらご教授願いたいです…
本当に知識ほぼゼロから始めているのでわからないことだらけです。
質問も初めてするので、やり方がいまいちわからなかったのですが、
よろしくお願い致します。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/13 01:15