关于js的小问题吧！有时间的老师同学来看看
各位老师我是想：
【点击添加可以添加一行，删除就删除当前行】
实际是：
【只能删除写在文档里的<tr>,动态添加的就不行】
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="UTF-8"/>
<style type="text/css">
*{
font-family:Microsoft YaHei;
}
#table{
background: #fff;
margin:0;
border:0;
border-collapse:collapse;
}
#table td{
border:solid #ccc 1px;
}
#table th{
border:solid #999 2px;
}
#btn{
border:0;
width: 80px;
height: 25px;
background:#999;
color: #fff;
cursor: pointer;
}
.deletass{
color:#f60;
cursor: pointer;
}
.div{
margin-top: 5px;
}
.div > *{
float: left;
margin:0 3px;
}
</style>
<script type="text/javascript">
function addEventOnload(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function addtr(){
var table = document.getElementById("table").lastChild;/*找到表格*/
var new_tr = document.createElement("tr"); /*创建tr*/
/** 学号 **/
var num = document.getElementById("num"); /*获取学号id*/
var num_txt = parseInt(num.value); /*必须为整数*/
if(num_txt < 10 && num_txt >= 0){
num_txt = "0"+num_txt;
}
if(num_txt >= 0){ /*限制必须输入学号*/
var new_tx_a = document.createTextNode(num_txt);/*创建文本节点，追加学号*/
}else{
alert("请输入正确学号!");
return false;
}
var new_td_a = document.createElement("td");/*新建td储存学号*/
new_td_a.appendChild(new_tx_a); /*赋予学号*/
new_tr.appendChild(new_td_a); /*追加到tr*/
/** 姓名 **/
var name = document.getElementById("name"); /*获取姓名*/
var name_txt = name.value;
if(name_txt.length <= 16){ /*限制名字数*/
var new_tx_b = document.createTextNode(name_txt);
}else{
alert("姓名不能超过16个字，请重新输入");
return false;
}
var new_td_b = document.createElement("td"); /*新建td储存姓名*/
new_td_b.appendChild(new_tx_b); /*赋予姓名*/
new_tr.appendChild(new_td_b); /*追加到tr*/
/*添加删除按钮*/
var new_td_c = document.createElement("td"); /*新建td储存删除按钮*/
var new_a = document.createElement("a");
var new_a_txt = document.createTextNode("删除");
new_a.appendChild(new_a_txt); /*追加文本*/
new_a.setAttribute("class","deletass");
new_td_c.appendChild(new_a); /*追加到td*/
new_tr.appendChild(new_td_c); /*追加到tr*/
/*追加到原有行下面*/
table.appendChild(new_tr);
}
/*********************************************************************************************************************/
// 创建删除函数
function deleteel(){
var a_link = table.getElementsByClassName("deletass");
for(var j = 0; j<a_link.length; j++){
a_link[j].onclick = function(){
var table = document.getElementById("table").lastChild;
var x = table.removeChild(this.parentNode.parentNode);
}
}
}
function demo(){
var bbt = document.getElementById("bbt");
bbt.onclick = function(){
var table = document.getElementById("table").getElementsByTagName("tr");
alert(table.length);
}
}
/*********************************************************************************************************************/
addEventOnload(deleteel);
addEventOnload(demo);
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a class="deletass">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a class="deletass">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<div class="div">
<span>请输入相关信息:</span>
<input type="text" name="" id="num" value="学号" size="8">
<input type="text" name="" id="name" value="姓名" size="8">
<input type="button" value="添加一行" id="btn" onclick = "addtr()"/> <!--在添加按钮上添加点击事件 -->
<input type="button" name="" id="bbt" value="click">
</div>
</body>
</html>
开心的山羊浏览 3431回答 4
4回答
-
ahao430
因为你在load时调用了删除函数，给原有的行绑定了click删除事件。但是，对于新增的行，并没有进行绑定。只要在addtr函数内部，最后加上一行删除函数的调用即可。 -
慕粉理想者
用live -
Mr_bigshot
估计是你新增的行的删除没有能够绑定上点击事件，你可以查查看。解决方法是在你的新增函数内添加绑定点击事件的函数
随时随地看视频慕课网APP
Html/CSS
JavaScript