各位,怎实现这个功能,jsp的,请求支援,不白帮,如果看代码,可以找我
题主要的代码如下
<style>
table.good{border-collapse:collapse}
table.good td{border:solid 1px #ccc}
input.button{border:solid 1px #333;border-radius:50%;padding:0;margin:0;width:auto;font-size:15px;width:20px;height:20px}
</style>
<table class="good">
<tbody id="tbEM">
<tr><td align="right">是否提醒</td><td><input type="checkbox" /></td></tr>
<tr><td align="right">收件邮箱</td><td><input type="text" id="txtEM" /> <input type="button" value="+" class="button" onclick="add()" /></td></tr>
</tbody>
</table>
<script>
var tbEM = document.querySelector('#tbEM');
var txtEM = document.querySelector('#txtEM');
function add() {
if (txtEM.value == '' || txtEM.value.indexOf('@') == -1) { alert('请输入邮箱地址并且包含@!'); txtEM.select(); return false }
var tr = document.createElement('tr');
tr.innerHTML = '<td></td><td><input type="text" value="' + txtEM.value + '" /> <input type="button" value="-" class="button" onclick="remove(this)" /></td>';
tbEM.appendChild(tr);
txtEM.value = '';
}
function remove(el) {
if (confirm('确认删除?!')) {
tbEM.removeChild(el.parentNode.parentNode);
}
}
</script>
用document.createElement方法创建,参考:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 动态创建控件 </title>
<script type="text/javascript">
function add(){
//alert(document.getElementById("p1").innerHTML);
//alert(document.getElementById("div1").innerHTML);
//alert(document.getElementById("item").innerHTML);
//获取td标签
var item = document.getElementById("item");
//innerHTML属性可以获取非表单标签的文本内容
//创建3个标签控件,br,file,button
var br = document.createElement("br");
var input = document.createElement("input");
var btnDel = document.createElement("input");
var input2 = document.createElement("input");
//设置控件的名称和类型
input2.type="text";
input2.name="username";
input.type="file";
input.name="file2";
btnDel.type="button";
btnDel.value="删除";
//为按钮增加单击事件(click)
btnDel.onclick=function(){
alert(input2.value);
item.removeChild(br);
item.removeChild(input2);
item.removeChild(input);
item.removeChild(btnDel);
}
//追加到td标签内部
item.appendChild(br);
item.appendChild(input2);
item.appendChild(input);
item.appendChild(btnDel);
}
</script>
</head>
<body>
<h1>动态创建控件</h1>
<hr>
<table border="1" width="800">
<tr>
<td>文件上传</td>
<td id="item"><input type="file" name="file1"><input type="button" name="btnAdd" value="添加" onclick="add();"></td>
</tr>
</table>
<p id="p1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<div id="div1">我是div1标签内的文本内容</div>
</body>
</html>
如果是jq的话,
新增就是先新建一个节点,然后插入就行了,移除就是获取到选中的那个节点然后把它移除就行了,大概是想就是这样,太久没写jq了,代码不一定对,但是思路就是这样了.
例如
// 新增节点
var $mail = $("<input class="email" />");
var $parent = $("ul"); // 获取父节点
// 这里还要写好加号按钮的点击事件,那个按钮点击的时候就插入到父节点后面就行了
$parent.append($mail); // 插入到最后面
// 移除节点
$parent.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'input'){
target.remove()
}
}
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!