JS动态添加表格问题

[___________超]

代码如下,

<script language="javascript"> 
var i=1;
function AddRow() {
var tableObject=new Object(); 
var isneed=true;
tableObject=document.getElementById("CloneNodeShow"); 
if(isneed) 
{ 
//添加一行 

var newTR=tableObject.insertRow(tableObject.rows.length); 
var td0=newTR.insertCell(newTR.cells.length); 
var td1=newTR.insertCell(newTR.cells.length); 
var td2=newTR.insertCell(newTR.cells.length); 
var td3=newTR.insertCell(newTR.cells.length); 

td0.innerHTML=(++i); 
td1.innerHTML='<input type="text" name="txtmember"/>'; 
td1.innerHTML='<input type="text" name="txtusername"/>';
//true表示深度克隆 
var newSelect=document.getElementById("txtday").cloneNode(true); 
newSelect.id="txtday"+i; 
td3.appendChild(newSelect); 
} 
}
function removeRow() {
	var i=document.getElementById('CloneNodeShow').rows.length;
	document.getElementById('CloneNodeShow').deleteRow(i-1);
}
</script> 



<form action="?action=update" method="post">
<table id="CloneNodeShow">
	<tbody>
	<tr><th class="num">序号</th><th>员工号</th><th>姓名</th><th>班别</th><th><a href="javascript:;" onclick="AddRow()">添加</a></th><th><a href="javascript:;" onclick="removeRow()">删除</a></th></tr>
	<tr>
		<td>1</td>
		<td><input type="text" name="txtmember" /></td>
		<td><input type="text" name="txtusername" /></td>
		<td>
			<select name="txtday" id="txtday">
				<option value="白班" selected="selected">白班</option>
				<option value="夜班">夜班</option>
			</select>
		</td>
	</tr>
	</tbody>
	<tfoot>
	<tr><td colspan="5" class="submit"><input type="submit" name="submit" value="上传数据库 " /></td></tr>
	</tfoot>
</table>
</form>

想请你们帮忙改改
1.单击添加按钮时,下一行在"上传数据库" tofoot按钮下面,怎么样放其上,tbody之内呢?

2.怎么限制最大添加行数?

3.删除功能会删掉最前面的TH.这点很郁闷

以上,请各位帮忙看看,很郁闷~~ 谢谢~~~

[ci1699]

最简单的话换下table结构就ok拉。

<form action="?action=update" method="post">
<table>
    <tbody>
    <tr><th class="num">序号</th><th>员工号</th><th>姓名</th><th>班别</th><th><a href="javascript:;" onclick="AddRow()">添加</a></th><th><a href="javascript:;" onclick="removeRow()">删除</a></th></tr>
     <tr>
        <td>1</td>
        <td><input type="text" name="txtmember" /></td>
        <td><input type="text" name="txtusername" /></td>
        <td>
            <select name="txtday" id="txtday">
                <option value="白班" selected="selected">白班</option>
                <option value="夜班">夜班</option>
            </select>
        </td>
    </tr>
	 </tbody>
</table>
<table id="CloneNodeShow">
    <tbody>
    </tbody>
</table>
<input type="submit" name="submit" value="上传数据库 " />
</form>

[___________超]

是的,谢谢`但是出来的序号就是从4开始了.你运行一下看看~~

[Quote=引用 1 楼 ci1699 的回复:]
最简单的话换下table结构就ok拉。


PHP code

<form action="?action=update" method="post">
<table>
<tbody>
<tr><th class="num">序号</th><th>员工号</th><th>姓名</th><th>班别</th><th><a href="javascript:;" onc……
[/Quote]

[___________超]

sorry,序号好像是正确的,好像少一个INPUT框~

另外,能不能帮忙改一下不是增加一个table的方式

[ci1699]

这样吧。

<script language="javascript"> 
var i=1;
function AddRow() {
var tableObject=new Object(); 
var isneed=true;
tableObject=document.getElementById("CloneNodeShow"); 
if(isneed) 
{ 
//添加一行 
var newTR=tableObject.insertRow(tableObject.rows.length); 
var td0=newTR.insertCell(newTR.cells.length); 
var td1=newTR.insertCell(newTR.cells.length); 
var td2=newTR.insertCell(newTR.cells.length); 
var td3=newTR.insertCell(newTR.cells.length); 

td0.innerHTML=(++i); 
td1.innerHTML='<input type="text" name="txtmember"/>'; 
td2.innerHTML='<input type="text" name="txtusername"/>';
//true表示深度克隆 
var newSelect=document.getElementById("txtday").cloneNode(true); 
newSelect.id="txtday"+i; 
td3.appendChild(newSelect); 
} 
}
function removeRow() {
    var s=document.getElementById('CloneNodeShow').rows.length;
   if(s<1) return; 
	document.getElementById('CloneNodeShow').deleteRow(s-1);
   	--i;
}
</script> 



<form action="?action=update" method="post">
<table>
    <tbody>
    <tr><th class="num">序号</th><th>员工号</th><th>姓名</th><th>班别</th><th><a href="javascript:;" onclick="AddRow()">添加</a></th><th><a href="javascript:;" onclick="removeRow()">删除</a></th></tr>
     <tr>
        <td>1</td>
        <td><input type="text" name="txtmember" /></td>
        <td><input type="text" name="txtusername" /></td>
        <td>
            <select name="txtday" id="txtday">
                <option value="白班" selected="selected">白班</option>
                <option value="夜班">夜班</option>
            </select>
        </td>
    </tr>
	 </tbody>
</table>
<table id="CloneNodeShow">
    <tbody>
    </tbody>
</table>
<input type="submit" name="submit" value="上传数据库 " />
</form>

[Quote=引用 2 楼 van416521 的回复:]

是的,谢谢`但是出来的序号就是从4开始了.你运行一下看看~~

引用 1 楼 ci1699 的回复:
最简单的话换下table结构就ok拉。


PHP code

<form action="?action=update" method="post">
<table>
<tbody>
<tr><th class="num">序号</th><th>员工号</th><th>姓……
[/Quote]

[___________超]

增加,删除可行了
这样两个TABLE,提交表单不知道会不会有问题.`~~
我看到网上的一个TABLE也可以实现,如果想改成一个TABLE,JS该怎么改啊..谢谢


[Quote=引用 4 楼 ci1699 的回复:]
这样吧。


PHP code


<script language="javascript">
var i=1;
function AddRow() {
var tableObject=new Object();
var isneed=true;
tableObject=document.getElementById("CloneNodeShow");
if(isn……
[/Quote]