1.在页面上写一个table标签,写一个按钮,响应单击事件,调用一个函数,每单击一次,为table增加一行数剧据,单元格中内容任意
2.上述table中生成的每行尾部单元格内加一个删除链接,当点击次此链接时删除当前行(提示,使用parentNode,行节点是单元格节点的父,单元格节点是链接节点的父)
你题目的解答代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<input type="text" id="text" value="添加的内容" /><input type="button" value="添加" onclick="addfunc();" /><br>
<table id="tab" border="1">
<tr>
<th>数据</th>
<th>操作</th>
</tr>
</table>
<script type="text/javascript">
function addfunc() {
var tbody = document.querySelector("#tab tbody");
var tr = document.createElement("tr");
var text = document.getElementById("text").value;
tr.innerHTML = '<td>'+text+'</td><td><input type="button" value="删除" onclick="delfunc(this);" /></td>';
tbody.appendChild(tr);
}
function delfunc(t) {
var tbody = document.querySelector("#tab tbody");
tbody.removeChild(t.parentNode.parentNode);
}
</script>
</body>
</html>
如有帮助,望采纳!谢谢!
参考:
<!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>