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

有没有大神能提供一下，删除单元行，数字会自动按顺序排列的思路？例如我删掉第三行，后面的数字由4 5变成3 4

xh001

xh002

xh003

xh004

xh005

我现在删掉第三行，后面两行自动变成

xh003

xh004

还有一个问题，如果数据多了，有两位数三位数的人数，好像更难了。

不一定要把代码写出来，提供具体的思路就行。

风起临冬

2018-08-04

源自：JavaScript进阶篇 9-22

关注问题我要回答

801

操作

收起

2 回答

风起临冬提问者
2018-08-04

function del(x){
        var table=document.getElementById("table");
        var tr=x.parentNode.parentNode;
        var message=confirm("确认删除？");
        if(message==true){
        tr.parentNode.removeChild(tr);
        }
        /*每点一次删除，tr的第一第二个子节点都会变成新值*/
        /*即 学号和姓名随着每一次删除，会变成"xh"+当前tr在table的索引值，于是就能自动保持连续的1234了*/
        var u=document.getElementsByTagName("tr");
        for(var i=1;i<u.length;i++){
            var num=table.indexOf(u[i])
            u[i]=new Array();
            u[i][0]=u[i].childNodes[0];
            u[i][1]=u[i].childNodes[1];
            u[i][0].innerHTML="xh00"+num;
            u[i][1].innerHTML="第"+num+"个学生";
        }
    
    }

我在删除的函数里加了点东西，每次删除都能更新一下学号和姓名，这样写个人感觉逻辑没有问题，但是却没有用。

下面，我会把整个代码发出来。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<script type="text/javascript">
    window.onLoad=function(){
        var tr=document.getElementById("table").childNodes;
        for(var i=0;i<tr.length;i++){
            onMounse(tr[i]);
        }
    }

    function onMounse(x){
        x.onmouseover=function(){
            x.style.backgroundColor="#f2f2f2";
        }
        x.onmouseout=function(){
            x.style.backgroundColor="#fff";
        }
    }

    function add(){
        var num=document.getElementById("table").childNodes.length+1
        var x=document.createElement("tr");
        var y=document.createElement("td");
        var z=document.createElement("td");
        var m=document.createElement("td");
        y.innerHTML="xh00"+num;
        z.innerHTML="第"+num+"个学生";
        m.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";
        x.align="center";
        x.appendChild(y);
        x.appendChild(z);
        x.appendChild(m);
        document.getElementById("table").appendChild(x)
    }

    function del(x){
        var table=document.getElementById("table");
        var tr=x.parentNode.parentNode;
        var message=confirm("确认删除？");
        if(message==true){
        tr.parentNode.removeChild(tr);
        }
        /*每点一次删除，tr的第一第二个子节点都会变成新值*/
        /*即 学号和姓名随着每一次删除，会变成"xh"+当前tr的索引值，于是就能自动保持连续的1234了*/
        var u=document.getElementsByTagName("tr");
        for(var i=1;i<u.length;i++){
            var num=table.indexOf(u[i])
            u[i]=new Array();
            u[i][0]=u[i].childNodes[0];
            u[i][1]=u[i].childNodes[1];
            u[i][0].innerHTML="xh00"+num;
            u[i][1].innerHTML="第"+num+"个学生";
        }
    
    }
</script>
</head>
<body>
    <table border="1" width="50%" id="table">
        <tr align="center">
            <td>学号</td>
            <td>姓名</td>
            <td>操作</td>
        <tr align="center">
            <td>xh001</td>
            <td>王小明</td>
            <td><a href="javascript:;" onclick="del(this)">删除</a>
        <tr align="center">
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;" onclick="del(this)">删除</a>
    </table>
    <form>
        <input type="button" value="添加一行" onclick="add()">
    </form>
</body>
</html>