js练习——动态控制表格中得行
<html>
<!---------------------------------------------------------------
-- 动态 表格
-- kay
-- 2007-07-25
---------------------------------------------------------------->
<head>
<title>动态添加</title>
<script language="javascript">
var value;
function change()
{
var selectvalue = document.getElementById("se").selectedIndex;
value = selectvalue;
}
function addHtml(r)
{
var row = document.getElementById("tb");
var rownum ;
if(r!=0)
{
rownum = r + 1;
}
else
{
//获得当前得行数
var num = document.getElementById("tb").rows.length;
//使添加得新行在表格底部
rownum = num - 1;
}
row.insertRow(rownum);
//值编号
row.rows[rownum].insertCell(0);
row.rows[rownum].cells[0].innerHTML="<input type='text'/>";
//值代码
row.rows[rownum].insertCell(1);
row.rows[rownum].cells[1].innerHTML="<input type='text'/>";
if(value==2)
{
//最大值
row.rows[rownum].insertCell(2);
row.rows[rownum].cells[2].innerHTML="<input type='text'/>";
//最小值
row.rows[rownum].insertCell(3);
row.rows[rownum].cells[3].innerHTML="<input type='text'/>";
}
else
{
//最大值
row.rows[rownum].insertCell(2);
row.rows[rownum].cells[2].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
//最小值
row.rows[rownum].insertCell(3);
row.rows[rownum].cells[3].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
}
//值描述
row.rows[rownum].insertCell(4);
row.rows[rownum].cells[4].innerHTML="<input type='text'/>";
//添加方式
row.rows[rownum].insertCell(5);
row.rows[rownum].cells[5].innerHTML="<select id='sys'><option value='0'>系统定义</option><option value='1'>用户定义 </option></select>";
//操作
row.rows[rownum].insertCell(6);
row.rows[rownum].cells[6].innerHTML="<input type='button' value='+' onclick='addHtml("+rownum+")'/><input type='button' value='-' onclick='deleterow("+rownum+")'/>";
}
function deleterow(rnum)
{
var num = document.getElementById("tb").rows.length;
if(rnum != num)
{
var aa = num - rnum ;
if(aa == 1)
{
//防止删除最后一行
rnum = rnum - 1;
}
if(confirm('你确定要删除吗？'))
{
var tbody = document.getElementById("tb");
tbody.deleteRow(rnum);
}
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select id="se" onchange="change()">
<option value="num">数值</option>
<option value="str">字符</option>
<option value="strnum">数值+字符</option>
</select>
<p>
<input type="button" name="Submit2" value="Add" onclick="addHtml(000)"/>
</p>
<table width="50%" border="1" align="center">
<tbody id="tb">
<tr>
<td align="center" valign="middle">值编号</td>
<td align="center" valign="middle">值代码</td>
<td align="center" valign="middle">最大值</td>
<td align="center" valign="middle">最小值</td>
<td align="center" valign="middle">值描述</td>
<td align="center" valign="middle">添加方式</td>
<td align="center" valign="middle">操作</td>
</tr>
<tr>
<td colspan="7" align="center" valign="middle"><input type="submit" name="Submit" value="保存" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<!---------------------------------------------------------------
-- 动态 表格
-- kay
-- 2007-07-25
---------------------------------------------------------------->
<head>
<title>动态添加</title>
<script language="javascript">
var value;
function change()
{
var selectvalue = document.getElementById("se").selectedIndex;
value = selectvalue;
}
function addHtml(r)
{
var row = document.getElementById("tb");
var rownum ;
if(r!=0)
{
rownum = r + 1;
}
else
{
//获得当前得行数
var num = document.getElementById("tb").rows.length;
//使添加得新行在表格底部
rownum = num - 1;
}
row.insertRow(rownum);
//值编号
row.rows[rownum].insertCell(0);
row.rows[rownum].cells[0].innerHTML="<input type='text'/>";
//值代码
row.rows[rownum].insertCell(1);
row.rows[rownum].cells[1].innerHTML="<input type='text'/>";
if(value==2)
{
//最大值
row.rows[rownum].insertCell(2);
row.rows[rownum].cells[2].innerHTML="<input type='text'/>";
//最小值
row.rows[rownum].insertCell(3);
row.rows[rownum].cells[3].innerHTML="<input type='text'/>";
}
else
{
//最大值
row.rows[rownum].insertCell(2);
row.rows[rownum].cells[2].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
//最小值
row.rows[rownum].insertCell(3);
row.rows[rownum].cells[3].innerHTML="<input type='text' value='不可用' disabled='disabled'/>";
}
//值描述
row.rows[rownum].insertCell(4);
row.rows[rownum].cells[4].innerHTML="<input type='text'/>";
//添加方式
row.rows[rownum].insertCell(5);
row.rows[rownum].cells[5].innerHTML="<select id='sys'><option value='0'>系统定义</option><option value='1'>用户定义 </option></select>";
//操作
row.rows[rownum].insertCell(6);
row.rows[rownum].cells[6].innerHTML="<input type='button' value='+' onclick='addHtml("+rownum+")'/><input type='button' value='-' onclick='deleterow("+rownum+")'/>";
}
function deleterow(rnum)
{
var num = document.getElementById("tb").rows.length;
if(rnum != num)
{
var aa = num - rnum ;
if(aa == 1)
{
//防止删除最后一行
rnum = rnum - 1;
}
if(confirm('你确定要删除吗？'))
{
var tbody = document.getElementById("tb");
tbody.deleteRow(rnum);
}
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select id="se" onchange="change()">
<option value="num">数值</option>
<option value="str">字符</option>
<option value="strnum">数值+字符</option>
</select>
<p>
<input type="button" name="Submit2" value="Add" onclick="addHtml(000)"/>
</p>
<table width="50%" border="1" align="center">
<tbody id="tb">
<tr>
<td align="center" valign="middle">值编号</td>
<td align="center" valign="middle">值代码</td>
<td align="center" valign="middle">最大值</td>
<td align="center" valign="middle">最小值</td>
<td align="center" valign="middle">值描述</td>
<td align="center" valign="middle">添加方式</td>
<td align="center" valign="middle">操作</td>
</tr>
<tr>
<td colspan="7" align="center" valign="middle"><input type="submit" name="Submit" value="保存" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
