jQuery对table表格进行增删改查

2024-10-26 12:04:53

最近要处理一些前端的工作，重新学习了一下jQuery，感觉还是那么的锋利啊！！！

总结了一下对table的增删改查，写一篇留着以后自己recode。

1.首先我自己写了一个简单的div布局。

2.实现几个用<a>标签做的按钮的功能分别是新增修改删除查询和返回。

代码如下

html+css（原谅我写在一起吧。。毕竟渲染不是我的强项）

<html> 

<head><title>测试数据</title></head>
<style type="text/css">
  table, td{
  font:100% '微软雅黑';
  }
  table{width:80%;border-collapse:collapse; margin:0 0 0 100px}
  th, td{text-align:center;border:1px solid #fff;}
  th{background:#328aa4}
  td{background:#e5f1f4;}
</style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jq.js"></script>
<body>
 <a href="#" style ="margin:100px" id="add_btn">新增</a>
 <input id="Ktext" type="text"> <a href="#" id="search_btn">  查询</a>
 <a href="#" style ="margin:100px" id="back_btn">返回</a>
 <br/>
<table id="tb">
  <tr id="trr">
    <th style="width:100px">ID</th>
    <th style="width:100px">Name</th>
    <th style="width:100px">salary</th>
    <th style="width:100px">功能</th> 

  </tr>
  <tbody id="hide_tbody">
  <tr style="display:none" id="trr">
    <td style="width:100px" id="no_id"><input value='' type='text'></td>
    <td style="width:100px"><input value='' type='text'></td>
    <td style="width:100px"><input value='' type='text'></td>
    <td style="width:200px" id="a"><a href="#" id="save_btn">保存</a>
    <a href="#" id="edit_btn" style="display:none">修改</a>
    <a href="#" id="del_btn">删除</a></td>
  </tr>
  </tbody>
  <tbody id="show_tbody">
  <tr id="trr" >
    <td style="width:100px" id="no_id">1</td>
    <td style="width:100px">小王</td>
    <td style="width:100px">3000</td>
    <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a>
    <a href="#" id="edit_btn">修改</a>
    <a href="#" id="del_btn">删除</a></td>
  </tr>
  <tr id="trr">
    <td style="width:100px" id="no_id">2</td>
    <td style="width:100px">小李</td>
    <td style="width:100px">4000</td>
    <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a>
    <a href="#" id="edit_btn">修改</a>
    <a href="#" id="del_btn">删除</a></td>
  </tr>
  <tr id="trr">
    <td style="width:100px" id="no_id">3</td>
    <td style="width:100px">小张</td>
    <td style="width:100px">5000</td>
    <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a>
    <a href="#" id="edit_btn">修改</a>
    <a href="#" id="del_btn">删除</a></td>
  </tr>
  <tr id="trr">
    <td style="width:100px" id="no_id">4</td>
    <td style="width:100px">小赵</td>
    <td style="width:100px">6000</td>
    <td style="width:200px" id="a"><a href="#" id="save_btn" style="display:none">保存</a>
    <a href="#" id="edit_btn">修改</a>
    <a href="#" id="del_btn">删除</a></td>
  </tr>
  </tbody>
</table>
</body>
</html>

jQuery的代码如下

$(document).ready(function(){
  var tb = $("#tb"); 

  //添加
  $("#add_btn").click(function(){
    var hideTr = $("#hide_tbody",tb).children().first();
    var newTr = hideTr.clone().show();
    $("#show_tbody",tb).append(newTr);
  }); 

  //保存
  $("#save_btn",tb).die('click').live('click',function(){
      var tr = $(this).parent().parent();
    $("input[type='text']",tr).each(function(i,el){
      el = $(el);
      el.parent().text(el.val());
      el.remove();
    });
    $("#save_btn",tr).hide();
    $("#edit_btn",tr).show();
  }); 

  //修改
  $("#edit_btn",tb).die('click').live('click',function(){
    var tr = $(this).parent().parent();
    $("td:not('#a')",tr).each(function(i,el){
      el = $(el);
      var html = "<input value='"+el.text()+"' type='text'>";
      el.html(html);
    });
    $("#edit_btn",tr).hide();
    $("#save_btn",tr).show();
  }); 

  //删除
  $("#del_btn",tb).die('click').live('click',function(){
    $(this).parent().parent().remove();
  }); 

  //查询
  $("#search_btn").click(function(){
    var key = $("#Ktext").val();
    var sbody = $("#show_tbody");
    var trr = $("#trr",sbody);
    var keyword = $("#no_id",sbody).text();
    for(var i = 0; i < keyword.length;i++)
    {
    if(keyword[i]== key[0]){
      trr.eq(i).show();
    }else{
      trr.eq(i).hide();
    }
    }
  });
  //返回
  $("#back_btn").click(function(){
    var sbody = $("#show_tbody");
    $("#trr",sbody).show(); 

  });
});

虽然有点简陋不过还是蛮实用的。
功能展示如下

其中查询功能是按照ID来进行查询的，点返回后可以复原数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery操作表格（table）的常用方法、技巧汇总

以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色复制代码代码如下: $('#table1 tr').hover(function(){ $(this).children('td').addClass('hover')}, function(){ $(this).children('td').removeClass('hover')}); 方法二: 复制代码代码如下: $("#table1 tr:gt(0)").hover(function()
JQuery 动态生成Table表格实例代码

JQuery动态生成Table表格主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo
jquery表格datatables实例解析直接加载和延迟加载

参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选), 由于时间紧,省略了很多,所以总结份简化版的仅供参考. 1.直接加载,这个比较简单,如下 <div id="tid" class="col-sm-12 col-md-12"> <div id="secondtid" hidden="hidden"></div
jQuery实现获取table表格第一列值的方法

本文实例讲述了jQuery实现获取table表格第一列值的方法.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!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.or
jQuery表格插件datatables用法汇总

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下一.初始化在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&
jQuery表格排序组件-tablesorter使用示例

一.引入文件复制代码代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script>  <
jQuery表格插件datatables用法总结

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的使用方
jQuery表格(Table)基本操作实例分析

本文实例讲述了jQuery表格(Table)基本操作.分享给大家供大家参考,具体如下: Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个表格Table: table { border-collapse: collapse; border-spacing: 0; margin-right: auto; margin-left: auto; width: 800px; } th, td { border: 1px
使用jQuery操作HTML的table表格的实例解析

最终效果图: 简单来看一下其中的主要部分: HTML: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } CSS: <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>姓名</th> <th>
jQuery+json实现动态创建复杂表格table的方法

本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test
JQuery Ajax动态生成Table表格

前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
jQuery表格插件datatables用法详解

一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的二.如何使用在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我

jQuery对table表格进行增删改查

相关推荐

随机推荐