<%@ page contentType="text/html; charset=gb2312" %>
<html>
<head>
<title>查询窗口</title>
<script language="JavaScript">
function changeValue1(obj){
if(obj.value == 0){
document.getElementById("result").value = "f117";
}else {
document.getElementById("result").value = "gaofei";
}
}
function changeValue(obj){
if(obj.value == 0){
obj.parentElement.parentElement.cells[1].children[0].value = "f117";
}else if(obj.value == 1){
obj.parentElement.parentElement.cells[1].children[0].value = "gaofei";
}else
obj.parentElement.parentElement.cells[1].children[0].value = "";
}
function insertrow(){
var newrow = document.all.tbl.rows[0].cloneNode(true); //克隆一行
document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
}
function delerow(){
var numrow = document.all("newTB").rows.length;
if (numrow == 0) {
alert("此行无法删除!");
return false;}
document.all("newTB").deleteRow(numrow-1);
}
</script>
</head>
<body class="dialog_body">
<form method="POST" onSubmit="return doSubmit(this)">
<fieldset style="margin:5px;width:630px;">
<legend>查询条件</legend>
<div align="center" class="inputblock" style="width:930;height:150;overflow:auto;">
<table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
<tr>
<td class="title" width="16%">列表框</td>
<td class="title" width="16%">结果</td>
</tr>
</table>
<table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
<tbody id="tbl">
<tr>
<td width="16%">
<select id="pid" name="project" onchange="changeValue(this)">
<option value=""></option>
<option value="0">人员编号</option>
<option value="1">姓名</option>
</select>
</td>
<td width="16%">
<input id="result" type="text" value="" readonly="true">
</td>
</tr>
</tbody>
<tbody id="newTB">
</tbody>
</table>
</div>
</fieldset>
<div align="right" style="margin:10px;">
<input type="button" onClick="insertrow();" value="增加一行">
<input type="button" onClick="delerow();" value="删除一行">
</div>
</form>
</body>
</html>
cloneNode实现表格增加删除效果
原创mb64660286caedc 博主文章分类:javascript ©著作权
©著作权归作者所有:来自51CTO博客作者mb64660286caedc的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
js实现表格无缝滚动效果
table表格无缝向上滚动 排名 地市 ...
JavaScript -
jquery实现增加删除行
选项1:删除选项2:删除 添加...
jquery javascript 添加行 -
jQuery 实现表格变色效果
html css js 效果: 2017-09-25 17:16:29
jquery html css javascript IT -
基于jQuery表格增加删除代码示例
基于jQuery表格增加删除代码示例 ...
html javascript jquery i++ 代码示例