您的位置：首页 > Web前端 > JQuery

jQuery动态实现动态添加删除表格信息

2019-07-19 11:39 323 查看

首先应该配置jQuery框架环境，并将其正确引入到目标页面当中。这里用的是jQuery-1.8.3.
实际上jQuery-2.x以下版本对浏览器的支持都是比较好的，以上版本会对移动端优先。如果
你是B/C架构，2.x以下是不错的选择。
以下对每条代码进行了解释，请参阅！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//为添加按钮注册点击事件
$(":button").click(function () {
//创建一个tr，并转为jQuery对象
var tr =$("<tr></tr>") ;
//创建4个td，向td,中添加内容
var td1 = $("<td></td>");
td1.append($("#username").val());
var td2 = $("<td></td>");
td2.append($("#phone").val());
var td3 = $("<td></td>");
td3.append($("#email").val());
var td4 = $("<td></td>");

//'javascript:void(0)'表示不做任何显示，如果是#或其他，会重新加载整个页面
//添加删除链接
var a = $("<a href='javascript:void(0)'>删除</a>");
td4.append(a);

//为删除绑定点击事件
a.click(function () { // a 已经转为了jQuery对象，可以直接调用click方法
$(this).parent().parent().remove(); //当前this代表点击的dom对象，即删除，找到<tr>对象
});
//用链式编程追加每条添加的信息
tr.append(td1).append(td2).append(td3).append(td4);
$("#tab").append(tr); //向表格追加行
});
});
</script>
</head>
<body>
<div align="center">
<table id="tab" border="1">
<tr>
<td>姓名</td>
<td>电话</td>
<td>邮箱</td>
<td>删除</td>
</tr>
</table>
</div>
姓名：<input type="text" name="username" id="username"><br>
电话：<input type="text" name="phone" id="phone"><br>
邮箱：<input type="email" name="email" id="email"><br>
<input type="button" value="添加">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航