基于jQuery实现可编辑的表格


Posted in jQuery onDecember 11, 2019

前言

我们知道jQuery是一个轻便的JavaScript框架,里面封装了系统和程序常用到的一些方法,利用CSS、HTML可以将这些内容运用起来,做出各式各样好看的界面,下面小编使用jQuery实现了一个“可编辑的表格”的例子。

代码加说明

一、HTML代码

1.使用<thead></thead>实现标头;

2.一个table中可以包含thead和tbody

3.表头的内容可以放到th中。

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>JQuery实战2-可编辑的表格</title>
 <link href="css/editTable.css" type="text/css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
 <table>
 <thead>
  <tr>
  <th colspan=2>鼠标点击表格项就可以编辑</th>
  </tr>
 </thead> 
 
 <tbody>
  <tr>
  <th>学号</th>
  <th>姓名</th>
 </tr>
 <tr>
  <td>001</td>
  <td>周星驰</td> 
  </tr> 
 <tr>
  <td>002</td>
  <td>星女郎</td> 
  </tr> 
 <tr>
  <td>003</td>
  <td>周润发</td> 
 </tr>
 <tr>
  <td>004</td>
  <td>赌神</td> 
 </tr>
 </tbody>
 </table>
</body>
</html>

基于jQuery实现可编辑的表格

二、CSS代码

1.table{}称作标签选择器,可以对整个页面所有table产生影响;

2.table td{} 表示table中包含的所有td;

3.border_collapse:collape 使表格中的单元格的边框合并

table{
 border:1px solid black;
 border-collapse:collapse;
 /* 修正单元格之间的边框不能合并的问题*/
 width:400px;
 }
 
table th{
 border:1px solid black;
 width:50%;
}
table td{
 border:1px solid black;
 width:50%; 
}
tbody th{
 background-color:#A3BAE9;
}

三、JavaScript文件代码

1.用来解决奇偶行背景色不同;

2.$(function(){})与$(documnet).ready(function(){})等价;

  $("tbody tr")  可以返回tbody中所有tr节点;

  $("tbody tr:even") 可以返回tbody中所有索引值是偶数的tr节点;

3.$()方法的参数如果是一个DOM对象时,这个方法相当于把DOM对象转换成jQuery对象;

   $()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成jQuery对象。

$(function(){ 
 //找到表格偶数行
 //odd是数组中下标为奇数的项,even是下标为偶数的项
 $("tbody tr:even").css("background-color","#ECE9D8");
 //找到所有学号的单元格
 var numId=$("tbody td:even");
 //给这些单元格注册点击事件
 numId.click(function(){
  
 //找到当前鼠标点击的td
 var tdObj=$(this);
 //
 if(tdObj.children("input").length>0){
  //当前td中的input,不执行click处理
  return false;
  }
 var text=tdObj.html();
 //清空td的内容
 tdObj.html("");
 
 //创建一个文本框
 //去掉文本框的边框
 //文本框的文字大小16px
 //文本框的宽度与td相同 
 //设置文本框的背景色
 //将td中的内容放到文本框中 
 //将文本框插入到td中
 var inputObj=$("<input type='text' />").css("border-width","0")
 .css("font-size","16px")
 .width(tdObj.width())
 .css("background-color",tdObj.css("background-color"))
 .css("font",tdObj.css("font"))
 .val(text)
 .appendTo(tdObj); 
 //文本框插入后被选中
 //inputObj.get(0).select();
 inputObj.trigger("focus").trigger("select");
 inputObj.click(function(){
   return false;
   });
 //处理文本框的回车和Esc操作
 inputObj.keyup(function(event){
        //获取键值
 var keycode=event.which;
        //回车
  if(keycode==13){
  //获取当前文本框的内容
  var inputText=$(this).val();
  //将td的内容修改为文本框的内容
  tdObj.html(inputText);
  }
   
  //esc情况,
  //将td的内容还原成text
  if(keycode==27){
  tdObj.html(text);
  }
 
 });
 
  });
 
});

小结

关于jQuery的学习,不只是停留在例子上面,我们还要从中不断地深入,理解并能够运用起来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现验证用户登录
Dec 10 #jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
You might like
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
解析PHP提交后跳转
2013/06/23 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
机械工程师的岗位职责
2013/11/17 职场文书
员工培训邀请函
2014/01/11 职场文书
顶撞老师检讨书
2014/02/07 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
工作说明书范文
2014/05/07 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
个人自我剖析材料
2014/09/30 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python