                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

大神帮我看下删除行的方式不对吗这样

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

.active{background: #cff;}

</style>

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

var aTr=document.getElementsByTagName('tr');

var i=0;

for(i=0;i<aTr.length;i++){

aTr[i].onmouseover=function(){

for(i=0;i<aTr.length;i++){

aTr[i].className=''

};

this.className='active';

};

aTr[i].onmouseout=function(){

for(i=0;i<aTr.length;i++){

aTr[i].className=''

};

var oBtn=document.getElementsByTagName('input')[0];

var oTab=document.getElementById('table');

oBtn.onclick=function(){

var xh=prompt("请输入学号");

var xm=prompt("请输入姓名");

if(xh&&xm!=null){

var newTr=document.createElement('tr');

newTr.innerHTML='<td>'+xh+'</td><td>'+xm+'</td><td><a href="javascript:;" >删除</a></td>';

oTab.appendChild(newTr);

};

for(i=0;i<aTr.length;i++){

aTr[i].lastChild.onclick=function(){

aTr[i].parentNode.removeChild(aTr[i]);

}

};

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

// 创建删除函数

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

苏慕然

2015-11-22

源自：JavaScript进阶篇 9-22

关注问题我要回答

591

操作

收起

1 回答

李晓健
2015-11-22

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <style type="text/css">
        .active{background: #cff;}
    </style>
    <script type="text/javascript">

        window.onload = function(){

            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            var aTr=document.getElementsByTagName('tr');
            var i=0;

            for(i=0;i<aTr.length;i++){
                aTr[i].onmouseover=function(){
                    for(i=0;i<aTr.length;i++){
                        aTr[i].className=''
                    };
                    this.className='active';
                };
                aTr[i].onmouseout=function(){
                    for(i=0;i<aTr.length;i++){
                        aTr[i].className=''
                    };
                };
            };

            var oBtn=document.getElementsByTagName('input')[0];
            var oTab=document.getElementById('table');
            oBtn.onclick=function(){
                var xh=prompt("请输入学号");
                var xm=prompt("请输入姓名");
                if(xh&&xm!=null){
                    var newTr=document.createElement('tr');
                    newTr.innerHTML='<td>'+xh+'</td><td>'+xm+'</td><td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>';
                    oTab.appendChild(newTr);
                };


            };
        };
        //把你这之前的一个循环删除了  重新加了一个方法
        function deleteRow(el){
            var tr = el.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
        }
        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；



        // 创建删除函数



    </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 href="javascript:;" onclick="deleteRow(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="deleteRow(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

</table>
<input type="button" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
</body>
</html>