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

<!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>
时间: 2024-10-17 05:32:09

点击添加一行 删除一行 改变序列号的相关文章

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

点击按钮添加或者删除一行实例代码

点击按钮添加或者删除一行实例代码:网站在填写表达的时候又很多的选择空间,甚至可以自行添加需要添加的内容,例如可以点击按钮添加一个表达项,如果不需要的话可以点击一个按钮删除,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

添加一行删除一行-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

表格增加一行/删除一行

1,点击按钮,表格增加/删除一行,表格可编辑 HTML: <div class="handle_tab_box clearfix"> <button class="removeRow_btn" onclick="delrow()">删除</button> <button class="addRow_btn" onclick="addrow()">增加</

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

利用jquery动态添加和删除表格的一行,并且保存单行数据

开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <form action="" id="" method="post"> ... <table id="addTable" > <tr class="first_tr"> <th&

Javascript DOM 03 表格添加、删除 + 搜索

获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用  添加.删除 1 <script> 2 window.onload=function (){ 3 /*var str='abcdef'; 4 alert(str.search('g')); //找到并且返回字符串出现的位置,如果没找到-1 5 */ 6 /* 7 var str='abc 123 ert'; 8 var arr=str.split(' '); 9 ale

javascript添加或者删除table表格行代码实例

javascript添加或者删除table表格行代码实例:表格是常用的元素,虽然在布局中已经鲜有使用,已经基本被div css所取代,但是在组织表格数据方面还是有很大的优势的,比使用div css要来的方便,添加或者删除一行也就是其中的tr更是最为常见的操作,下面就通过代码实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta

JS 添加和删除HTML 标签

//添加一行价格 $('#add_ladder_price').click(function(){ var trHTML = '<tr align="center" class="tr_ladder_price">' + '<td><input style="text-align: center" type="text" name="purchases" value="