jQuery实现表格的增、删、改操作示例


Posted in jQuery onJanuary 27, 2019

本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考,具体如下:

这里实现的是在jQuery中通过按钮的形式,对表格进行的一些基本操作,可以实现表格的增删改操作,并实现对鼠标事件监听,实现表格的高亮行操作。

<head>
  <meta charset="UTF-8">
  <title>3water.com 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>

效果图如下:

jQuery实现表格的增、删、改操作示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery导航条固定定位效果实例代码
May 26 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
Jquery的Ajax技术使用方法
Jan 21 #jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
You might like
一个PHP的String类代码
2010/04/20 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JS常见算法详解
2017/02/28 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python 操作 MySQL数据库
2020/09/18 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
《火烧云》教学反思
2014/04/12 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
三字经教学反思
2014/04/26 职场文书
2015年教师节慰问信
2015/03/23 职场文书
房屋维修申请报告
2015/05/18 职场文书
消费者投诉书范文
2015/07/02 职场文书
新娘婚礼致辞
2015/07/27 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python