📄 twotablesample.html
字号:
<html>
<head>
<title>两个表格的添加、删除行实例</title>
<script language="javascript" src="tableRowAddDel.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-size:12px;color: black;font-family:arial,verdana,sans-serif,"宋体";background-color:white;}
body,td,div,a {font-size:10pt;line-height:17px;}
TABLE.main {padding:5px 5px;font-size:10pt;color: black;border:0 solid black;background-color:white;
border-right:3 solid #CCCCCC;border-bottom:3 solid #CCCCCC;
}
TABLE.main TH {background-color:#CEC6FB;height:30px;color:black;font-weight:normal;}
TABLE.main TR.true {background-color:#DDDDDD;}
TABLE.main TR.false {background-color:#EEEEEE;}
TABLE.main TD {padding:5px 5px;}
div.desc{color:#8D65A3;}
</style>
</head>
<body>
<center>
<form name="Form1" method="post">
<table width="600" border="1" id="objTable1" class="main">
<tr >
<th colspan="6">两个表格添加/删除行的测试</th>
</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" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow('objTable1');">
<input type="button" name="btnDelRow" value="删除行"
onClick="javascript:delRow('objTable1');">
</td>
</tr>
</table>
<br>
<table width="600" border="1" id="objTable2" class="main" >
<tr >
<th colspan="6">两个表格添加/删除行的测试</th>
</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_1" value="1">是
<input type="radio" name="rdoBox_1" 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="center">
<input type="button" name="btnAddRow" value="添加行" title="点击在该行的下方增加一行"
onClick="javascript:addRow('objTable2');">
<input type="button" name="btnDelRow" value="删除行"
onClick="javascript:delRow('objTable2');">
</td>
</tr>
</table>
</form>
<input type="button" 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();
Form1.action = "twoTableSample.jsp?count1=" + intCount1 + "&count2=" + intCount2;
Form1.submit();
}
</script>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -