Jquery！table列表序号动态添加或删除改变

使用jquery，table列表序号如何动态添加或删除列表序号改变

1. css

<style>
        .main{
            width: 1000px;
            height: 600px;
            border: 1px solid darkslategrey;
            margin: 50px auto 0 auto;
            text-align: center;
        }
        .main_tit{
            width: 800px;
            margin: auto;
        }
        h2{
            font-weight: normal;
        }
        input{
            width: 180px;
            height: 25px;
            border: 1px solid darkgray;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.22);
        }
        button{
            display: block;
            margin: 40px auto 0 auto;
            width: 120px;
            height: 30px;
            background-color: white;
            border: 1px solid darkgray;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.22);
        }
        h5{
            width: 800px;
            height: 0px;
            border: 1px solid #ededed;
        }
        table{
            width: 500px;
            margin: auto;
            box-shadow: 1px 4px 4px rgba(0,0,0,0.25);
        }
    </style>

2.html内容

<div class="main">
    <div class="main_tit">
        <h2>添加新员工</h2>
        name:<input type="text" name="name">
        email:<input type="text" name="email">
        salary:<input type="text" name="salary">
        <button>Submit</button>
        <h5></h5>
    </div>
    <table border="1px">
        <tr>
            <th>序号</th>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <th><span class="order"></span></th>
            <th>Tom</th>
            <th>[e-mail]</th>
            <th>5000</th>
            <th><a href="#">Delect</a> </th>
        </tr>
        <tr>
            <th><span class="order"></span></th>
            <th>Jeery</th>
            <th>[e-mail]</th>
            <th>8000</th>
            <th><a href="#">Delect</a> </th>
        </tr>
        <tr>
            <th><span class="order"></span></th>
            <th>Bob</th>
            <th>[e-mail]</th>
            <th>10000</th>
            <th><a href="#">Delect</a> </th>
        </tr>
        <tr>
            <th><span class="order"></span></th>
            <th>胡歌</th>
            <th>[e-mail]</th>
            <th>5000000</th>
            <th><a href="#">Delect</a> </th>
        </tr>
    </table>
</div>

3.jq代码

$(function () {
        //序号
        var index = 1;
        var num;
        $(".order").each(function () {   //对序号列span 的 name 进行循环
            num=$(this).html(index++);
        });
        //添加
        $('button').click(function () {
            var x=$("input[name='name']").val();
            var y=$("input[name='email']").val();
            var z=$("input[name='salary']").val();

            $(".order").each(function () {
                var s=$(".order").length;
                num=s+1;
            });
            $('<tr></tr>').appendTo('table');
            $('<th>'+'<span class="order">'+num+'</span> '+'</th>').appendTo('tr:last');
            $('<th>'+x+'</th>').appendTo('tr:last');
            $('<th>'+y+'</th>').appendTo('tr:last');
            $('<th>'+z+'</th>').appendTo('tr:last');
            $('<th>'+'<a href="#">'+'Delect'+'</a>'+'</th>').appendTo('tr:last');
        })

        //删除
        $(document).on('click','a',(function () {
            $($(this).parent().parent().nextAll("tr")).each(function () {
                var a=$(this).find('th').eq(0).text();
                // $(this).find('th').eq(1).text(a-1);
                $(this).find('th').eq(0).text(a-1);
            });
            $(this).parent().parent().remove();
        }));

    })