点击添加一行 删除一行 改变序列号

Posted jinsuo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击添加一行 删除一行 改变序列号相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>点击删除序号</title>
</head>

<body>
<table>
    <tr>
        <td>1</td>
        <td>内容</td>
        <td><input type="button" value="删除" class="delete"></td>
    </tr>
</table>
<input type="button" value="添加" class="add">
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add").click(function(){
            var copy=$("table tr:last").clone();
            copy.appendTo("table");
            han();
                $(".delete").click(function(){
                    $(this).parents("tr").remove();
                    
                    han();
                })
            });
            
        });
        
        
        
        
        var han=function(){
            var chang=$("table tr").length;
            for(i=0; i<chang; i++){
                //$("table tr").eq(i).find(‘td:first‘).text(i+1);
            
                    $("table tr").eq(i).find(‘td‘).eq(0).text(i+1);
            
                }
            }
</script>
</html>

 

以上是关于点击添加一行 删除一行 改变序列号的主要内容，如果未能解决你的问题，请参考以下文章

Vue 点击添加一行和删除一行

从列表视图中删除一行后刷新片段

无法同时添加和删除行

react + es6 +ant design 实现一个简单demo表格添加删除

elementui笔记：el-table添加一行可输入的空行or删除一行记录

elementui笔记：el-table添加一行可输入的空行or删除一行记录