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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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 柱状图实现代码
2009/12/04 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
Vue 全局loading组件实例详解
2018/05/29 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
学生党员一帮一活动总结
2014/07/08 职场文书
领导参观欢迎词
2015/01/26 职场文书
保护校园环境倡议书
2015/04/28 职场文书
大学班干部竞选稿
2015/11/20 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android