文章/答案/技术大牛

发布

社区首页 >问答首页 >行/列JavaScript DHTML

问行/列JavaScript DHTML
EN

Stack Overflow用户

提问于 2012-10-25 03:47:24

回答 2查看 142关注 0票数 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的信息？

javascript

dhtml

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-30 05:48:39

我的解决方案是：

<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>

非常感谢大家的评论和帮助

问候

票数 0

Stack Overflow用户

发布于 2012-10-25 04:00:47

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

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

然后，您只需执行类似var newRow = $('table.templaterow').clone()；的操作，然后设置每一列: newRow.find('td')

而不是追加到表中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13056599

复制

相似问题

问行/列JavaScript DHTML
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行/列JavaScript DHTMLEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行/列JavaScript DHTML
EN