0

ボタンを押すと、関数が行/列を生成する関数を探しています。

私は次のコードで試してきました

 function addTRTD(){ 
 var tbElm = document.getElementById("tbdy");

 var newRow = document.createElement("tr");

 var newCol1= document.createElement("TD");
 var newCol2= document.createElement("TD");


 newCol1.innerHTML = "Row 1 Cell 1";
 newCol2.innerHTML = "Row 1 Cell 2";;


 newRow.appendChild(newCol1);
     newRow.appendChild(newCol2);


 tbElm.appendChild(newRow);


     newCol1.innerHTML = "Row 1 Cell 1";
     newCol2.innerHTML = "Row 1 Cell 1";



     var newRow = document.createElement("tr");
     newRow.appendChild(newCol1);
     newRow.appendChild(newCol2);

     var newCol1= document.createElement("TD");
     var newCol2= document.createElement("TD");

     newCol1.innerHTML = "Row 2 Cell 1";
     newCol2.innerHTML = "Row 2 Cell 2";


 tbElm.appendChild(newRow);
 }

しかし運がない。ボタンをクリックすると、次の出力が得られます 行 1 セル 1 行 1 セル 2

Row2 の情報を表示するにはどうすればよいですか?

4

2 に答える 2

0

私にとっての解決策は次のとおりです。

<html>
<head>
<title>Auto-Gen</title>

<script type="text/javascript">

var template = '</table>\
<div align="justify">\
<td>\
<select name="name{num}" title="25">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3">3</option>\
<option value="4">4</option>\
<option value="5">5</option>\
<option value="6">6</option>\
<option value="7">7</option>\
<option value="8">8</option>\
<option value="9">9</option>\
<option value="10">10</option>\
<option value="11">11</option>\
<option value="12">12</option>\
<option value="13">13</option>\
<option value="14">14</option>\
<option value="15">15</option>\
<option value="16">16</option>\
<option value="17">17</option>\
<option value="18">18</option>\
<option value="19">19</option>\
<option value="20">20</option>\
<option value="21">21</option>\
<option value="22">22</option>\
<option value="23">23</option>\
<option value="24">24</option>\
<option value="25">25</option>\
<option value="26">26</option>\
<option value="27">27</option>\
<option value="28">28</option>\
<option value="29">29</option>\
<option value="30" selected="selected">30</option>\
<option value="31">31</option>\
<option value="32">32</option>\
</select>\
</td>\
<td>\
    {num}\
 </td>\
</div>';

var counter =0;

function addNew() {
    a = document.createElement('div');
    html = template.replace(/{num}/g, counter.toString());
    a.innerHTML = html;
    var mainContainer = document.getElementById('mainContainer');
    mainContainer.appendChild(a);
    counter++;
}

</script>
</head>
<body>

<div id="mainContainer"> </div>

<div align="justify"> <input value="Add" onclick="addNew()" type="button"> </div>

</body>
</html>

コメントやヘルプをくださった皆様、本当にありがとうございました

よろしく

于 2012-10-29T21:48:38.530 に答える
0

2 つの列を持つ 1 つの行があるように見えるので、私はあなたのコードに従っているかどうかわかりませんが、5 つの列を持つ行を宣言します。

一貫した行がある場合、テンプレートとして機能する非表示の行を作成するのが最も簡単な方法であることが過去にわかりました。これにより、動的に作成したスタイリングを適用することもできます。

var newRow = $('table.templaterow').clone(); のようなことをするよりも 各列を設定するよりも: newRow.find('td')

テーブルに追加するよりも。

于 2012-10-24T20:00:47.390 に答える