1.基本思路
(1)如何“复制”?
如上图所示,如果要在表格的某行上面或下面添加新的一行,
并且保证单元格中所有标签都一样,一般都是用clone的方法。
但是发现clone方法对IE要求较高,须是6.0,
所以我放弃这个方法,通过取得各个单元格内的html,
赋予新增行相应的单元格,以达到“复制”效果。
取html会遇到一个问题,就是标签中如果value值存在的话,那么一并会取出来。
而显然,我们希望新增行没有初值,
所以,在增加行的时候,我将新行的所有文本框赋予空值,
单选框和复选框都变成非选中状态,而下拉框则选中第一个。
(2)radio的名称(name)问题
不管是使用clone还是“复制”html的方法,radio的命名都是一个问题,
因为我们希望每个单元格中的radio各成一组,
而clone和“复制”html都会将radio的name一并复制过来,
这样原有的radio和新增的radio拥有相同的name,
对其进行输入时会相互制约。
如果仅仅是找到新增的radio,并且赋予它name值是行不通的,
必须明确赋予单元格内html内容,该html必须包含radio的name值,
如此看来,“复制”html的方法虽然有点笨,到这里还是派上了用场^_^。
我们可以得到原始的html内容,如何改变它的name呢?
找出原始radio的name值,在新增行的html中替换成另外一个名称。
由于这个名称只是为了给radio分组,所以可以用随机数代替,
我用的是时间。
(3)如何给表格中的标签赋予name
显然,我们肯定要得到各个标签的值,也就必须知道标签的name。
当提交表单时,需要用户给定一个初始的name值,
然后根据这个初值,以递增的方式给各行的标签赋值,
比如,如果用户设定输入文本框name初值为txt,
那么所有输入文本框的name将变为:txt_0,txt_1,txt_2…….。
此时大可以放心radio的顽固,
虽然通过改变name的属性值无法让它的输入有效,
但是对于后台的取值丝毫没有影响,如人所愿。
另外,要取得所有标签的值,就必须它的个数,
这个程序当然会提供一个函数获取的。
2.程序的局限性
表格的格式必须与图中相似,
程序希望不要动态操作的行(如图中的第一,二行)内不含指定的标签,
所谓指定的标签就是input,textarea,select,
也是支持动态操作的标签。
如果想要支持更多标签,稍微修改程序即可。
不过,一般这些就足够。
另外,不希望这种固定的行在表格末尾出现。
而且,表格最后一列必须是添加、删除按钮。
尽管有这么多局限性,但是对付一般的应用是没问题的。
3.使用举例
(1)一个页面只操作一个表格的情况(推荐)
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
<title>添加、删除表格</title>
<script language="javascript" src="doTable.js"></script>
<style>
.btn
{font-size:9pt;border:1 solid #006699;color:#006699;background-color:#B2E3FF}
td{font-size:10pt;}
</style>
</head>
<body>
<%
String strCount = "";
String strInputText = "",
strArea = "",
strRdo = "",
strSelect = "";
String[] aStrChkBox=null;
int intCount = 0;
strCount = request.getParameter("Count") == null?"":request.getParameter("Count");
if(!strCount.equals(""))
{
intCount = Integer.parseInt(strCount);
for(int i = 0 ;i < intCount;i ++ )
{
strInputText = request.getParameter("txtInput_" + i);
strArea = request.getParameter("txtArea_" + i);
strRdo = request.getParameter("rdoBox_" + i);
strSelect = request.getParameter("select_" + i);
out.println("输入文本框:" + strInputText + "");
out.println("多行文本框:" + strArea + "");
out.println("单选框:" + strRdo + "");
out.println("下拉框:" + strSelect + "");
aStrChkBox = request.getParameterValues("chkBox_" + i);
if(aStrChkBox != null)
{
out.println("复选框:");
for(int j = 0;j < aStrChkBox.length;j ++)
{
out.println(aStrChkBox[j] + ",");
}
}
out.println("<hr>");
}
}
%>
<center>
<form name="Form1" method="post">
<table width="600" border="1" id="objTable1" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
bordercolorlight="#006699" bordercolordark="#DDDDDD" >
<tb><font color="#00669">一个表格</font></tb>
<tr >
<td idth="150" colspan="6" style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>
</tr>
<tr>
<td width="100" align="center">输入文本框</td>
<td width="100" align="center">多行文本框</td>
<td width="100" align="center">单选框</td>
<td width="100" align="center">复选框</td>
<td width="100" align="center">下拉框</td>
<td width="100" align="center">操作表格</td>
</tr>
<tr>
<td align="center"><input type="text" size="10"></td>
<td><textarea rows="3" cols="10" ></textarea></td>
<td>
<input type="radio" name="rdoBox_0" value="1">是
<input type="radio" name="rdoBox_0" value="0">否
</td>
<td>
<input type="checkbox" value="chk1">
<input type="checkbox" value="chk2">
</td>
<td>
<select>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
</td>
<td align="cebter">
<input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow();">
<input type="button" class="btn" name="btnDelRow" value="删除行"
onClick="javascript:delRow();">
</td>
</tr>
</table>
</form>
<input type="button" class="btn" name="btnSubmit" value=" 提 交 " onClick="javascript:submit();">
</center>
</body>
</html>
<script language="javascript">
// ------- 初始化表格,页面加载时调用 ------- //
initTable("objTable1");
function submit()
{
// ----------------------- 设置标签name属性----------- /
var aStrName = new Array("txtInput","txtArea","rdoBox","chkBox","select");
setBaseName(aStrName);
var intCount = getCount(); //获取动态行的总数
Form1.action = "table.jsp?Count=" + intCount;
Form1.submit();
}
</script>
(2)一个页面操作多个表格的情况(效率受较大影响),只给出html部分
<html>
<head>
<title>添加、删除表格</title>
<script language="javascript" src="doTable.js"></script>
<style>
.btn
{font-size:9pt;border:1 solid #006699;color:#006699;background-color:#B2E3FF}
td{font-size:10pt;}
</style>
</head>
<body>
<center>
<form name="Form1" method="post">
<table width="600" border="1" id="objTable1" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
bordercolorlight="#006699" bordercolordark="#DDDDDD" >
<tb><font color="#00669">一个表格</font></tb>
<tr >
<td width="150" colspan="6" style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>
</tr>
<tr>
<td width="100" align="center">输入文本框</td>
<td width="100" align="center">多行文本框</td>
<td width="100" align="center">单选框</td>
<td width="100" align="center">复选框</td>
<td width="100" align="center">下拉框</td>
<td width="100" align="center">操作表格</td>
</tr>
<tr>
<td align="center"><input type="text" size="10"></td>
<td><textarea rows="3" cols="10" ></textarea></td>
<td>
<input type="radio" name="rdoBox_0" value="1">是
<input type="radio" name="rdoBox_0" value="0">否
</td>
<td>
<input type="checkbox" value="chk1">
<input type="checkbox" value="chk2">
</td>
<td>
<select>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
</td>
<td align="cebter">
<input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow('objTable1');">
<input type="button" class="btn" name="btnDelRow" value="删除行"
onClick="javascript:delRow('objTable1');">
</td>
</tr>
</table>
<table width="600" border="1" id="objTable2" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
bordercolorlight="#006699" bordercolordark="#DDDDDD" >
<tb><font color="#00669">一个表格</font></tb>
<tr >
<td width="150" colspan="6" style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>
</tr>
<tr>
<td width="100" align="center">输入文本框</td>
<td width="100" align="center">多行文本框</td>
<td width="100" align="center">单选框</td>
<td width="100" align="center">复选框</td>
<td width="100" align="center">下拉框</td>
<td width="100" align="center">操作表格</td>
</tr>
<tr>
<td align="center"><input type="text" size="10"></td>
<td><textarea rows="3" cols="10" ></textarea></td>
<td>
<input type="radio" name="rdoBox_0" value="1">是
<input type="radio" name="rdoBox_0" value="0">否
</td>
<td>
<input type="checkbox" value="chk1">
<input type="checkbox" value="chk2">
</td>
<td>
<select>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
</td>
<td align="cebter">
<input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow('objTable2');">
<input type="button" class="btn" name="btnDelRow" value="删除行"
onClick="javascript:delRow('objTable2');">
</td>
</tr>
</table>
</form>
<input type="button" class="btn" name="btnSubmit" value=" 提 交 " onClick="javascript:submit();">
</center>
</body>
</html>
<script language="javascript">
function submit()
{
setTable("objTable1");
var aStrName1 = new Array("txtInput1","txtArea1","rdoBox1","chkBox1","select1");
setBaseName(aStrName1);
var intCount1 = getCount();
setTable("objTable2");
var aStrName2 = new Array("txtInput2","txtArea2","rdoBox2","chkBox2","select2");
setBaseName(aStrName2);
var intCount2 = getCount();
}
</script>
(1)如何“复制”?
如上图所示,如果要在表格的某行上面或下面添加新的一行,
并且保证单元格中所有标签都一样,一般都是用clone的方法。
但是发现clone方法对IE要求较高,须是6.0,
所以我放弃这个方法,通过取得各个单元格内的html,
赋予新增行相应的单元格,以达到“复制”效果。
取html会遇到一个问题,就是标签中如果value值存在的话,那么一并会取出来。
而显然,我们希望新增行没有初值,
所以,在增加行的时候,我将新行的所有文本框赋予空值,
单选框和复选框都变成非选中状态,而下拉框则选中第一个。
(2)radio的名称(name)问题
不管是使用clone还是“复制”html的方法,radio的命名都是一个问题,
因为我们希望每个单元格中的radio各成一组,
而clone和“复制”html都会将radio的name一并复制过来,
这样原有的radio和新增的radio拥有相同的name,
对其进行输入时会相互制约。
如果仅仅是找到新增的radio,并且赋予它name值是行不通的,
必须明确赋予单元格内html内容,该html必须包含radio的name值,
如此看来,“复制”html的方法虽然有点笨,到这里还是派上了用场^_^。
我们可以得到原始的html内容,如何改变它的name呢?
找出原始radio的name值,在新增行的html中替换成另外一个名称。
由于这个名称只是为了给radio分组,所以可以用随机数代替,
我用的是时间。
(3)如何给表格中的标签赋予name
显然,我们肯定要得到各个标签的值,也就必须知道标签的name。
当提交表单时,需要用户给定一个初始的name值,
然后根据这个初值,以递增的方式给各行的标签赋值,
比如,如果用户设定输入文本框name初值为txt,
那么所有输入文本框的name将变为:txt_0,txt_1,txt_2…….。
此时大可以放心radio的顽固,
虽然通过改变name的属性值无法让它的输入有效,
但是对于后台的取值丝毫没有影响,如人所愿。
另外,要取得所有标签的值,就必须它的个数,
这个程序当然会提供一个函数获取的。
2.程序的局限性
表格的格式必须与图中相似,
程序希望不要动态操作的行(如图中的第一,二行)内不含指定的标签,
所谓指定的标签就是input,textarea,select,
也是支持动态操作的标签。
如果想要支持更多标签,稍微修改程序即可。
不过,一般这些就足够。
另外,不希望这种固定的行在表格末尾出现。
而且,表格最后一列必须是添加、删除按钮。
尽管有这么多局限性,但是对付一般的应用是没问题的。
3.使用举例
(1)一个页面只操作一个表格的情况(推荐)
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
<title>添加、删除表格</title>
<script language="javascript" src="doTable.js"></script>
<style>
.btn
{font-size:9pt;border:1 solid #006699;color:#006699;background-color:#B2E3FF}
td{font-size:10pt;}
</style>
</head>
<body>
<%
String strCount = "";
String strInputText = "",
strArea = "",
strRdo = "",
strSelect = "";
String[] aStrChkBox=null;
int intCount = 0;
strCount = request.getParameter("Count") == null?"":request.getParameter("Count");
if(!strCount.equals(""))
{
intCount = Integer.parseInt(strCount);
for(int i = 0 ;i < intCount;i ++ )
{
strInputText = request.getParameter("txtInput_" + i);
strArea = request.getParameter("txtArea_" + i);
strRdo = request.getParameter("rdoBox_" + i);
strSelect = request.getParameter("select_" + i);
out.println("输入文本框:" + strInputText + "");
out.println("多行文本框:" + strArea + "");
out.println("单选框:" + strRdo + "");
out.println("下拉框:" + strSelect + "");
aStrChkBox = request.getParameterValues("chkBox_" + i);
if(aStrChkBox != null)
{
out.println("复选框:");
for(int j = 0;j < aStrChkBox.length;j ++)
{
out.println(aStrChkBox[j] + ",");
}
}
out.println("<hr>");
}
}
%>
<center>
<form name="Form1" method="post">
<table width="600" border="1" id="objTable1" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
bordercolorlight="#006699" bordercolordark="#DDDDDD" >
<tb><font color="#00669">一个表格</font></tb>
<tr >
<td idth="150" colspan="6" style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>
</tr>
<tr>
<td width="100" align="center">输入文本框</td>
<td width="100" align="center">多行文本框</td>
<td width="100" align="center">单选框</td>
<td width="100" align="center">复选框</td>
<td width="100" align="center">下拉框</td>
<td width="100" align="center">操作表格</td>
</tr>
<tr>
<td align="center"><input type="text" size="10"></td>
<td><textarea rows="3" cols="10" ></textarea></td>
<td>
<input type="radio" name="rdoBox_0" value="1">是
<input type="radio" name="rdoBox_0" value="0">否
</td>
<td>
<input type="checkbox" value="chk1">
<input type="checkbox" value="chk2">
</td>
<td>
<select>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
</td>
<td align="cebter">
<input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow();">
<input type="button" class="btn" name="btnDelRow" value="删除行"
onClick="javascript:delRow();">
</td>
</tr>
</table>
</form>
<input type="button" class="btn" name="btnSubmit" value=" 提 交 " onClick="javascript:submit();">
</center>
</body>
</html>
<script language="javascript">
// ------- 初始化表格,页面加载时调用 ------- //
initTable("objTable1");
function submit()
{
// ----------------------- 设置标签name属性----------- /
var aStrName = new Array("txtInput","txtArea","rdoBox","chkBox","select");
setBaseName(aStrName);
var intCount = getCount(); //获取动态行的总数
Form1.action = "table.jsp?Count=" + intCount;
Form1.submit();
}
</script>
(2)一个页面操作多个表格的情况(效率受较大影响),只给出html部分
<html>
<head>
<title>添加、删除表格</title>
<script language="javascript" src="doTable.js"></script>
<style>
.btn
{font-size:9pt;border:1 solid #006699;color:#006699;background-color:#B2E3FF}
td{font-size:10pt;}
</style>
</head>
<body>
<center>
<form name="Form1" method="post">
<table width="600" border="1" id="objTable1" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
bordercolorlight="#006699" bordercolordark="#DDDDDD" >
<tb><font color="#00669">一个表格</font></tb>
<tr >
<td width="150" colspan="6" style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>
</tr>
<tr>
<td width="100" align="center">输入文本框</td>
<td width="100" align="center">多行文本框</td>
<td width="100" align="center">单选框</td>
<td width="100" align="center">复选框</td>
<td width="100" align="center">下拉框</td>
<td width="100" align="center">操作表格</td>
</tr>
<tr>
<td align="center"><input type="text" size="10"></td>
<td><textarea rows="3" cols="10" ></textarea></td>
<td>
<input type="radio" name="rdoBox_0" value="1">是
<input type="radio" name="rdoBox_0" value="0">否
</td>
<td>
<input type="checkbox" value="chk1">
<input type="checkbox" value="chk2">
</td>
<td>
<select>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
</td>
<td align="cebter">
<input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow('objTable1');">
<input type="button" class="btn" name="btnDelRow" value="删除行"
onClick="javascript:delRow('objTable1');">
</td>
</tr>
</table>
<table width="600" border="1" id="objTable2" bgcolor="#EEF7FD" cellspacing="0" cellpadding="5"
bordercolorlight="#006699" bordercolordark="#DDDDDD" >
<tb><font color="#00669">一个表格</font></tb>
<tr >
<td width="150" colspan="6" style="background-color:#6699CC;color:#FFFFFF">添加/删除行的测试</td>
</tr>
<tr>
<td width="100" align="center">输入文本框</td>
<td width="100" align="center">多行文本框</td>
<td width="100" align="center">单选框</td>
<td width="100" align="center">复选框</td>
<td width="100" align="center">下拉框</td>
<td width="100" align="center">操作表格</td>
</tr>
<tr>
<td align="center"><input type="text" size="10"></td>
<td><textarea rows="3" cols="10" ></textarea></td>
<td>
<input type="radio" name="rdoBox_0" value="1">是
<input type="radio" name="rdoBox_0" value="0">否
</td>
<td>
<input type="checkbox" value="chk1">
<input type="checkbox" value="chk2">
</td>
<td>
<select>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
</td>
<td align="cebter">
<input type="button" class="btn" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow('objTable2');">
<input type="button" class="btn" name="btnDelRow" value="删除行"
onClick="javascript:delRow('objTable2');">
</td>
</tr>
</table>
</form>
<input type="button" class="btn" name="btnSubmit" value=" 提 交 " onClick="javascript:submit();">
</center>
</body>
</html>
<script language="javascript">
function submit()
{
setTable("objTable1");
var aStrName1 = new Array("txtInput1","txtArea1","rdoBox1","chkBox1","select1");
setBaseName(aStrName1);
var intCount1 = getCount();
setTable("objTable2");
var aStrName2 = new Array("txtInput2","txtArea2","rdoBox2","chkBox2","select2");
setBaseName(aStrName2);
var intCount2 = getCount();
}
</script>