使用jQuery实现动态添加和删除行（表格）的操作

使用jQuery实现动态添加和删除行

实现效果

在这里插入图片描述

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
	    //代码优化
        /*
        * 创建一个用于复用的function函数
        * 绑定delete的的单击事件
        */
        var deleteFun = function () {
            在事件响应的function函数中，有一个this对象。这个this对象，就是当前正在响应的事件的DOM对象
            //我们可以通过this，获取它的父元素，的父元素。就可以知道要删除的是哪一行
            var $trObj = $(this).parent().parent();

            //这一行的第一个td的标签中间的值
            var name = $trObj.find("td:first").text();

            //当用户点击了确定，就返回true；
            //当用户点击了取消，就返回false。
            //confirm是JavaScript的确认提示框函数，你给它传什么，它就提示什么
            if(confirm("确认是否删除["+ name +"]选项？")){
                //点击了确定----要删除
                $trObj.remove();
            }
            //return false:可以阻止元素的默认行为
            return false;
        }


        //先做添加功能----给submit按钮绑定单击事件
        $("#addEmpButton").click(function () {

            //获取输入框中的内容
            var name = $("#empName").val();
            var email = $("#email").val();
            var salary = $("#salary").val();

            //创建一个行标签对象，添加到显示数据的表格中
			//把HTML标签放入到核心函数中，就可以自动实现创建
			var $trObj = $("<tr> " +
                "<td>"+name+"</td>" +
                "<td>"+email+"</td>" +
                "<td>"+salary+"</td>" +
                "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
                "</tr>");
            //添加到显示数据的表格中
			$trObj.appendTo($("#employeeTable"));

            //给添加的行的<a>绑上事件
            /*
            * 跟初始化时绑定的单击事件的操作是一样的
            */
			$trObj.find("a").click( deleteFun );
			/*
			* deleteFun:是函数复用
			* deleteFun():是函数调用
			*/
        });

        //删除功能----
        //给<a>标签，绑上单击事件，直到点击时候应该怎么做
        /*
        * 但是因为一开始在绑定单击事件的时候，是在页面加载完成之后，就完成了绑定。那个时候，就只有3个<a>。
        * 也就是说，定义的删除事件，只给最开始有的3条记录的 delete 绑定了。
        * 后来动态添加的<a>没有绑定上。
        * ====每添加一条，给它补绑一次，即可
         */
        $("a").click( deleteFun );//要注意在函数复用时定的这个小点！！！！！！
    });

	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

行百里者，半九十！！！
坚持下去，千万不要半途而废。！