87,917
社区成员
发帖
与我相关
我的任务
分享动态增加表格行的问题
<table width="98%" align="center" border="1" cellpadding="2" cellspacing="1">
<tr>
<td>
<div align="right">候选个数</div>
</td>
<td>
<select id="dropChoicesCount" onchange="selectedchange()" name="sel" runat="server" class="commdrop">
<option>4</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
<!--
<tr>
<td>
<div align="right">供选答案1</div>
</td>
<td><input type="text"/></td>
</tr>
-->
</table>
需要根据下拉控件的值来动态生成表格行，第一行有一个input，并插入到下拉控件后面，像上面注释的那样。
原来的方法，是在JS代码里使用一个for循环，根据下拉控件的值来创建tr结点，并创建相应的input结点，再insertRow(1)，但是当下拉控件的值发生改变时，原来已插入的表格行还是存在，并没有消失，导致生成的input数目不对。
第一个问题，如何删除已插入的表格行？
我自己的解决方法是在下拉控件后加入<tbody id="selecttbody"></tbody>，因为不能在table里嵌套div,span，所以只能考虑这个tbody了。
然后在JS代码里把插入的tr作为tbody的子结点，删除的时候要循环tbody的子结点。
可是var tbody = document.getElementById("selectbody");alert(tbody);显示却为null，在IE，forefox下都是为空。想不明白。用getElementsByTagName("tbody")，它的length却为0,真是见鬼了。
这是第二个问题，为什么tbody会为空？
第三个问题，如果有更好的动态生成input的方法，也可以贴出来，互相学习一下。
...全文
请发表友善的回复…
发表回复
浴火_凤凰 2009-08-18
- 打赏
- 举报
都给答案了
蓝色_冰点 2009-08-18
- 打赏
- 举报
<table id="myTable" width="98%" align="center" border="1" cellpadding="2" cellspacing="1">
<tr>
<td>
<div align="right">候选个数</div>
</td>
<td>
<select id="dropChoicesCount" onchange="selectedchange()" name="sel" runat="server" class="commdrop">
<option value="4">4</option>
<option value="2">2</option>
<option value="3">3</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>
</select>
</td>
</tr>
<tbody id="selecttbody">
<tr id="trTemplete">
<td align="right">供选答案1</td>
<td><input type="text"/></td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
var tbody;
var template; //模板行
window.onload = function() {
tbody = document.getElementById("selecttbody");
template = document.getElementById("trTemplete");
selectedchange();
}
function ClearRows() {
var newBody = document.createElement("tbody");
var tbl = document.getElementById("myTable");
tbl.replaceChild(newBody, tbody);
tbody = newBody;
}
function NewRow() {
//利用cloneNode(true)来复制
//你的这行就算有100个td,每个td都有不同的样式，都一次搞定！！！
var newRow = template.cloneNode(true);
tbody.appendChild(newRow);
return newRow;
}
function selectedchange() {
var n = document.getElementById("dropChoicesCount").value;
n = parseInt(n);
ClearRows();
for (var i = 0; i < n; i++) {
var nr = NewRow();
nr.cells[0].innerHTML = "供选答案" + (i + 1);
}
}
</script>记得给分哈...
game_jyl 2009-08-18
- 打赏
- 举报
答案都有了，先弄个10分在说吧
a11377815 2009-08-18
- 打赏
- 举报
楼上都给了答案了，路过，接分
hookee 2009-08-17
- 打赏
- 举报
<script type="text/javascript">
function selectedchange(obj){
var n = obj.options[obj.selectedIndex].text;
var tbl = document.getElementById("tb");
var tr = tbl.getElementsByTagName("tr");
var k = tr.length;
if(tr.length>1) for(var i=1;i<k;i++){
tr[1].parentNode.removeChild(tr[1],true);
}
for(var i=0;i<n;i++){
var newtr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML = "供选答案" + (i+1);
newtr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<input type=\"text\" name=\"t\"" + i + "\"/>";
newtr.appendChild(td);
tbl.appendChild(newtr);
}
if(document.all) tbl.outerHTML = tbl.outerHTML;
}
</script>
<table id="tb" width="98%" align="center" border="1" cellpadding="2" cellspacing="1">
<tr>
<td>
<div align="right">候选个数</div>
</td>
<td>
<select id="dropChoicesCount" onchange="selectedchange(this)" name="sel" runat="server" class="commdrop">
<option>4</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
<!--
<tr>
<td>
<div align="right">供选答案1</div>
</td>
<td><input type="text"/></td>
</tr>
-->
</table>
s_liangchao1s 2009-08-17
- 打赏
- 举报
<script type="text/javascript">
<!--
function selChange(osel){
var orow = null, ocell1 = null, ocell2 = null;
var otbody = document.getElementById("otable").tBodies[0];
var count = parseInt(osel.options[osel.selectedIndex].text, 10);
while(otbody.hasChildNodes()){
otbody.removeChild(otbody.lastChild);
}
for(var i = 0; i < count; i++){
orow = otbody.insertRow(-1);
ocell1 = orow.insertCell(0);
ocell2 = orow.insertCell(1);
ocell1.innerHTML = "供选答案" + (i + 1);
ocell2.innerHTML = "<input type='text' />";
}
}
//-->
</script>
<table width="98%" align="center" border="1" cellpadding="2" cellspacing="1" id="otable">
<thead>
<td>
<div align="right">候选个数</div>
</td>
<td>
<select id="dropChoicesCount" onchange="selChange(this)" name="sel" runat="server" class="commdrop">
<option>4</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</thead>
<tbody>
</tbody>
</table>
