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);
 }

但没有运气。单击按钮，我只得到以下输出 Row 1 Cell 1 Row 1 Cell 2

如何才能显示 Row2 的信息？

4

2 回答 2

0

我不确定我是否遵循您的代码，因为看起来您有一行有两列，但随后声明了一行有 5 列。

如果您有一致的行，我过去发现最简单的方法是创建一个隐藏行作为模板。这也允许应用您动态创建的任何样式。

而不是你可以做类似 var newRow = $('table.templaterow').clone(); 比设置每一列： newRow.find('td')

而不是附加到表格中。

于 2012-10-24T20:00:47.390 回答
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 回答