jQuery表格的维护和删除操作

2024-11-30 14:39:45

最近学习jQuery，可以利用js函数来实现对表格的维护和删除，相对于JavaScript简单方便

首先看看页面的实现效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  <title>添加用户</title>
 </head>
 <script src="user.js"></script>
 <body>
  <center>
   <br><br>
   添加用户:<br><br>
   姓名: <input type="text" name="name" id="name" />  
   email: <input type="text" name="email" id="email" />  
   电话: <input type="text" name="tel" id="tel" /><br><br>
   <button id="addUser">提交</button>
   <button id="deleteUser">删除选中</button>
   <br><br>
   <hr>
   <br><br>
   <table id="usertable" border="1" cellpadding="5" cellspacing=0>
    <tbody>
     <tr>
      <th><input type="checkbox" id="allCheckbox"/></th>
      <th>姓名</th>
      <th>email</th>
      <th>电话</th>
      <th>修改</th>
      <th>删除</th>
     </tr>
    </tbody>
   </table>
   <br>
   <br>
   <br>
   <hr>
   修改用户:<br><br>
   姓名: <input type="text" name="name" id="name_update" />  
   email: <input type="text" name="email" id="email_update" />  
   电话: <input type="text" name="tel" id="tel_update" /><br><br>
   <input type="hidden" id="id_update"/>
   <button id="updateUser">提交</button>
  </center>
 </body>
</html>

页面展示

js后台代码

$().ready(function(){
 var index = 1;
 /**
  * 完成添加功能
  */
 $("#addUser").click(function(){
  /**
   * 1、获取姓名,电话,email的值
   * 2、创建
   *  <tr>
   *   <td><input type="checkbox"></td>
   *   <td>${姓名}</td>
   *   <td>${email}</td>
   *   <td>${phone}</td>
   *   <td><a>修改</a></td>
   *   <td><a>删除</a></td>
   *  </tr>
   * 3、把创建完成的tr追加到tbody上
   */
  var name = $("#name").val();
  var email = $("#email").val();
  var tel = $("#tel").val();
  var $checkbox = $("<input/>").attr("type","checkbox");
  var $checkboxTD = $("<td/>").append($checkbox);
  $checkboxTD.attr("id",index);
  index++;
  var $nameTD = $("<td/>").text(name);
  var $emailTD = $("<td/>").text(email);
  var $phoneTD = $("<td/>").text(tel);
  var $updateA = $("<a/>").text("修改");
  /**
   * 完成修改的功能
   */
  $updateA.css("cursor","pointer");
  /**
   * 给修改的超级链接添加click事件
   */
  $updateA.click(function(){
   var name = $(this).parent().siblings("td:eq(1)").text();
   var email = $(this).parent().siblings("td:eq(2)").text();
   var tel = $(this).parent().siblings("td:eq(3)").text();
   var id = $(this).parent().siblings("td:eq(0)").attr("id");
   $("#name_update").val(name);
   $("#email_update").val(email);
   $("#tel_update").val(tel);
   $("#id_update").val(id);
  });
  var $updateTD = $("<td/>").append($updateA);
  var $delA = $("<a/>").text("删除");
  $delA.css("cursor","pointer");
  $delA.click(function(){//完成删除本行的功能
   if(window.confirm("您确认要删除吗?")){
    $(this).parent().parent().remove();
   }
  });
  var $delTD = $("<td/>").append($delA);
  var $tr = $("<tr/>").append($checkboxTD).
   append($nameTD).append($emailTD).
   append($phoneTD)
   .append($delTD).append($updateTD);
  $("#usertable tbody").append($tr);
 });
 /**
  * 完成删除几行的功能
  */
 $("#deleteUser").click(function(){
  if(window.confirm("您确认要删除吗?")){
   /**
    * :checkbox 所有的checkbox
    * :not(#allCheckbox) 不包含id为allCheckbox
    *  被选中的
    */
   $(":checkbox:not(#allCheckbox):checked").parent().parent().remove();
  }
 });
 /**
  * 全选功能
  */
 $("#allCheckbox").click(function(){
  if($(this).attr("checked")){
   $(":checkbox:not(#allCheckbox)").attr("checked",true);
  }else{
   $(":checkbox:not(#allCheckbox)").attr("checked",false);
  }
 });
 /**
  * 完成修改操作
  */
 $("#updateUser").click(function(){
  /**
   * 获取到修改的id的值，根据值去匹配table中的行
   */
  var idValue = $("#id_update").val();
  var name_update = $("#name_update").val();
  var email_update = $("#email_update").val();
  var tel_update = $("#tel_update").val();
  /**
   * 根据修改的id的值就定位某一行(td)
   */
  $("td[id="+idValue+"]").siblings("td:eq(0)").text(name_update);
  $("td[id="+idValue+"]").siblings("td:eq(1)").text(email_update);
  $("td[id="+idValue+"]").siblings("td:eq(2)").text(tel_update);
 });
});

以上所述是小编给大家介绍的jQuery表格的维护和删除操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jQuery实现点击该行即可删除HTML表格行

jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一.它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容.我已经写了许多关于jQuery教程,这个时候,我也用这个简单的纯实现了.任务是从一个HTML表使用一些时髦的效果,只要按一下该行的行.以下是实现这一目标的jQuery代码. $(document).ready(function() { $("#sample tr").click(function() { //change t
基于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动态增加删除表格行的小例子

复制代码代码如下: <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实现表格行和列的动态添加与删除方法【测试可用】

本文实例讲述了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的动态删除Table表格的行和列的代码

首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引第二个
jquery实现带复选框的表格行选中删除时高亮显示

通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除.在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示.这样给人的感觉非常好. 效果如下: 我做的这里有两个功能: 功能1.单击某行,该行的复选框被选中,同时改变一下背景色. 功能2.单击全选/全不选标签后,改变行的颜色. 两个功能我封装到了js文件中,使用的时候引入就行了. 先看
JQuery动态添加和删除表格行的方法

本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi
原生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"
基于jquery的实现简单的表格中增加或删除下一行

代码如下: html 复制代码代码如下: <div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><
jQuery表格的维护和删除操作

最近学习jQuery,可以利用js函数来实现对表格的维护和删除,相对于JavaScript简单方便首先看看页面的实现效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conte
jQuery:节点(插入,复制,替换,删除)操作

复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

一篇关于JQueryEasyUI学习之datagrid 添加.修改.删除学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细 <script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向href时,只取htm
jQuery实现用户信息表格的添加和删除功能

1.浏览器界面一个简单的用户信息操作 2.html代码 <body> <form name="userForm"> <center> 用户录入 <br /> 用户名: <input id="username" name="username" type="text" size=15 /> E-mail: <input id="email"
jQuery实现为table表格动态添加或删除tr功能示例

本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下:  <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDeta
Jquery属性的获取/设置及样式添加/删除操作技巧分析

本文实例讲述了Jquery属性的获取/设置及样式添加/删除操作技巧.分享给大家供大家参考,具体如下: Jquery属性的获取与设置 //找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性
js操作table元素实现表格行列新增、删除技巧总结

本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************
JQuery 表格操作(交替显示、拖动表格行、选择行等)

JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码代码如下: <script type='text/javascript'><!-- $(function(){ //交替显示行 $('#alternation').click(function(){ $('tbody > tr:odd', $('#example')).toggleClass('alternatio
jquery validate 实现动态增加/删除验证规则操作示例

本文实例讲述了jquery validate 实现动态增加/删除验证规则操作.分享给大家供大家参考,具体如下: 页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, element){ if(element.attr("id")=="province"||element.attr("id")=="cit
python 删除excel表格重复行,数据预处理操作

使用python删除excel表格重复行. # 导入pandas包并重命名为pd import pandas as pd # 读取Excel中Sheet1中的数据 data = pd.DataFrame(pd.read_excel('test.xls', 'Sheet1')) # 查看读取数据内容 print(data) # 查看是否有重复行 re_row = data.duplicated() print(re_row) # 查看去除重复行的数据 no_re_row = data.drop_d

jQuery表格的维护和删除操作

相关推荐

随机推荐