jQuery实现表格的增、删、改操作示例
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考，具体如下：
这里实现的是在jQuery中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格的高亮行操作。
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery表格操作</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//添加一行
$("#one").click(function() {
var $td = $("#trOne").clone();
$("table").append($td);
$("table tr:last").find("input").val("");
});
//删除一行
$("#two").click(function() {
$("table tr:not(:first):last").remove();
});
//删除所有行
$("#three").click(function() {
/*var len=$("tr").length;
for(var i=0;i<=len;i++){
$("tr")[i].remove();
}*/
//除第一行为其它行删除
$("tr:not(:first)").remove();
});
//删除选中的行
$("#four").click(function() {
//遍历选中的checkbox
$("[type='checkbox']:checked").each(function() {
//获取checkbox所在行的顺序
n = $(this).parents("tr").index();
$("table").find("tr:eq(" + n + ")").remove();
});
});
//设置高亮行
$("tr").mouseover(function() {
$(this).css("background-color","red");
});
$("tr").mouseout(function(){
$(this).css("background-color","white");
});
});
</script>
</head>
<body>
<input type="button" id="one" value="添加一行" /><br />
<input type="button" id="two" value="删除一行" /><br />
<input type="button" id="three" value="删除所有行" /><br />
<input type="button" id="four" value="删除选中的行" /><br />
<table width="400px" height="50px" border="2px" cellspacing="0" cellpadding="0">
<tr id="trOne">
<td><input type="checkbox" name=""></td>
<td><input type="" name="" value="姓名" </td>
<td><input type="" name="" value="年龄" </td>
<td><input type="" name="" value="性别" </td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td><input type="" name="" value="张三" </td>
<td><input type="" name="" value="18" </td>
<td><input type="" name="" value="男" </td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td><input type="" name="" value="李四" </td>
<td><input type="" name="" value="18" </td>
<td><input type="" name="" value="男" </td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td><input type="" name="" value="王五" </td>
<td><input type="" name="" value="18" </td>
<td><input type="" name="" value="男" </td>
</tr>
</table>
</body>
效果图如下：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery动态增加删减表格行特效
基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none"> <tbody> <tr> <td height="30"
-
基于jQuery实现表格的查看修改删除
效果图: HTML: <table id="table"> <tr> <th>姓名</th> <th>年龄</th> <th>职位</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td&
-
jQuery实现表格行和列的动态添加与删除方法【测试可用】
本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/19
-
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
在线演示: http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html//左键 复制代码 代码如下: <html> <head> <title>jQuery 动态增删表格</title> <meta http-equiv="Content-Type" content="text/html
-
jQuery对table表格进行增删改查
最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode. 1.首先我自己写了一个简单的div布局. 2.实现几个用<a>标签做的按钮的功能 分别是新增 修改 删除 查询和返回. 代码如下 html+css(原谅我写在一起吧..毕竟渲染不是我的强项) <html> <head><title>测试数据</title></head> <styl
-
JQuery动态添加和删除表格行的方法
本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi
-
jQuery+Datatables实现表格批量删除功能【推荐】
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 最近遇到这样的需求要求把表格批量删除.下面通过实例代码给大家介绍下. 1:点击全选的选择框CheckBox,选中以下列表中所有的选择框 2:再次点击全选的选择框CheckBox,不选中以下列表中所有的选择框 3:单选某个选择框 如图所示: http://recordit.co/GLj5a5BWo9 简单代码demo: <thead> <tr role="row&q
-
基于jquery的实现简单的表格中增加或删除下一行
代码如下: html 复制代码 代码如下: <div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><
-
jquery动态增加删除表格行的小例子
复制代码 代码如下: <script src="jquery/jquery-1.3.1.js"></script><style type="text/css">body{background:#FFFFFF;}</style></head><body><script> $(function(){ var show_count = 20; //要显示的条数 var count =
-
jQuery动态操作表单示例【基于table表格】
本文实例讲述了jQuery动态操作表单.分享给大家供大家参考,具体如下: <html> <head> <title>jquery表格操作</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> table { border: bla
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"