急！满意多给50分！在HTML中，通过JS动态创建一个或多个表格，并且表格可以删除，
我要做类似于防火墙的配置。点击按钮“增添”，然后在<form></form>中创建一个表格，表格内有一些表单，可以填写。每个表格都有一个“删除”按键，点击删除可以删除掉任...
我要做类似于防火墙的配置。
点击按钮“增添”，然后在<form></form>中创建一个表格，表格内有一些表单，可以填写。
每个表格都有一个“删除”按键，点击删除可以删除掉任意一个表格。
我需要一个这样的例子，非常着急！
如果满意，添加50分！！ 展开
点击按钮“增添”，然后在<form></form>中创建一个表格，表格内有一些表单，可以填写。
每个表格都有一个“删除”按键，点击删除可以删除掉任意一个表格。
我需要一个这样的例子，非常着急！
如果满意，添加50分！！ 展开
3个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<style type="text/css">
table{
border-collapse: collapse;
}
td{
border:1px solid red;
}
</style>
<script type="text/javascript">
function addtd(obj){
var td = document.createElement("td");
var input = document.createElement("input");
var inputBtn = document.createElement("input");
input.setAttribute("type", "text");
inputBtn.setAttribute("type", "button");
inputBtn.setAttribute("value", "删除");
inputBtn.setAttribute("onclick", "deltd(this);");
obj.parentNode.insertBefore(td, obj);
td.appendChild(input);
td.appendChild(inputBtn);
}
function deltd(a){
a.parentNode.parentNode.removeChild(a.parentNode);
}
function deltr(obj){
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
function addtr(){
var tab = document.getElementById("tab");
var span = document.createElement("span");
var tr = document.createElement("tr");
var input = document.createElement("input");
var inputDel = document.createElement("input");
inputDel.setAttribute("type", "button");
inputDel.setAttribute("value", "删除此行");
inputDel.setAttribute("onclick", "deltr(this)");
input.setAttribute("type", "button");
input.setAttribute("value", "增加单元格");
input.setAttribute("onclick", "addtd(this)");
span.appendChild(input);
span.appendChild(inputDel);
tr.appendChild(span);
tab.appendChild(tr);
}
</script>
</head>
<body>
<form action="">
<input type="button" onclick="addtr();" id="add" value="增加行"/>
<table id="tab">
</table>
</form>
</body>
</html>
有问题追问
更多追问追答
追问
相当吊，最后肯定选你了，我先看看，主要担心有问题不好问，待会就选你最佳，并多给50分
追答
好的 没问题 你试了么
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯javascript实现的代码如下：如果需要使用JQuery的再追问吧。
<html>
<head>
<title>Document</title>
<script type="text/javascript">
var index= 0;
function removeCh(id){
var child=document.getElementById(id);
child.parentNode.removeChild(child);
}
function addRow(tableId){
var parent = document.getElementById(tableId);
var tr=document.createElement("tr");
tr.id="row"+index;
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
var node=document.createTextNode(index);
td1.appendChild(node);
td2.innerHTML="<input type=\"text\" name=\"\">";
td3.innerHTML="<input type=\"button\" value=\"Delete\" onclick=\"removeCh('row"+index+"')\">"
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
parent.appendChild(tr);
index++;
}
function addTable(){
var form = document.getElementById("form");
var table = document.createElement("table");
table.id="table"+index;
table.innerHTML="<tr>"+
"<td><input type=\"button\" value=\"addRow\" onclick=\"addRow(\'table"+index+"\')\"></td>"
+"<td><input type=\"button\" value=\"deleteCurrentTable\" onclick=\"removeCh(\'table"+index+"\')\"></td>"
+"<td></td>"
+"</tr>"
+"<tr>"
+"<td>ID</td>"
+"<td>Input</td>"
+"<td>Function</td>"
+"</tr>"
+"<tr id=\"row"+index+"\">"
+"<td>123</td>"
+"<td><input type=\"text\" name=\"\"></td>"
+"<td><input type=\"button\" value=\"Delete\" onclick=\"removeCh('row"+index+"')\"></td>"
+"</tr>";
form.appendChild(table);
index++;
}
</script>
</head>
<body>
<form id="form">
<input type="button" value="addTable" onclick="addTable()">
<table id = "table" border = 0>
<tr>
<td><input type="button" value="addRow" onclick="addRow('table')"></td>
<td><input type="button" value="deleteCurrentTable" onclick="removeCh('table')"></td>
<td></td>
</tr>
<tr>
<td>ID</td>
<td>Input</td>
<td>Function</td>
</tr>
<tr id="row">
<td>123</td>
<td><input type="text" name=""></td>
<td><input type="button" value="Delete" onclick="removeCh('row')"></td>
</tr>
</table>
</form>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先你动态创建的表格需要一个id或者其他的属性来标示区分，
删除时，可以根据创建是设置的id或者其他的属性来删除。
比如用jqurey来操作。那就是:$("tablie[属性=属性值]").fadeOut(500);
$("#ID").fadeOut(500);等等，这种是不占位置的隐藏表格
删除时，可以根据创建是设置的id或者其他的属性来删除。
比如用jqurey来操作。那就是:$("tablie[属性=属性值]").fadeOut(500);
$("#ID").fadeOut(500);等等，这种是不占位置的隐藏表格
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
