jQuery实现可编辑的表格


Posted in jQuery onDecember 11, 2019

前言

上一篇博客更新了在页面中如何判断用户名是否已经被输入,这篇博客介绍一下页面中的表格内容如何像Excle表格一样修改。

内容

显示效果

jQuery实现可编辑的表格

照例,先上代码

HTML代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="script/jquery-1.8.2.js"></script>
 <script type="text/javascript" src="script/EditTable.js"></script>
 <link href="CSS/EditTable.css" rel="stylesheet" />
</head>
<body>
 <table>
 <thead>
  <tr>
  <th colspan="2">鼠标点击表格项就可以编辑</th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <th>学号</th>
  <th>姓名</th>
  </tr>
  <tr>
  <td>0000001</td>
  <td>张三</td>
  </tr>
  <tr>
  <td>0000002</td>
  <td>李四</td>
  </tr>
  <tr>
  <td>0000003</td>
  <td>王五</td>
  </tr>
  <tr>
  <td>0000004</td>
  <td>赵六</td>
  </tr>
 </tbody>
 </table>
</body>
</html>

CSS代码:

table {
 border:1px solid black;
 border-collapse:collapse;
 width:400px;
}
table td{
 border:1px solid black;
 width:50%;
}
table th{
 border:1px solid black;
 width:50%;
}
tbody th {
 background-color:#A3BAE9;
}

JavaScript代码:

//需要首先通过JavaScript来解决内容部分奇偶行的背景不同
$(function () {
 //找到表格的内容区域中所有的偶数行
 $("tbody tr:even").css("background-color", "#ECE9D8");
 //找到所有可以编辑的单元格
 var numTd = $("tbody td:even");
 //给这些单元格注册鼠标点击的事件
 numTd.click(function () {
 //找到当前鼠标点击的td,this对应的就是响应了click的那个td
 var tdObj = $(this);
 if (tdObj.children("input").length>0) {
  //当前td中有内容,不执行click操作
  return false;
 }
 var text = tdObj.html();
 tdObj.html("");
 //创建一个文本框
 //去掉文本框的边框
 //设置文本框中的文字字体大小事15px
 //是文本框的宽度和td的宽度相同
 //设置文本框的背景色
 //需要将当前td中的内容放到文本框中
 //清空td中的内容
 //文本框插入到td中去
 var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", "15px").css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(tdObj.html()).val(text).appendTo(tdObj);
 //使得文本框插入之后就被选中
 inputObj.trigger("focus").trigger("select");
 inputObj.click(function () {
  return false;
 });
 //处理文本框上回车和esc按键的操作
 inputObj.keyup(function () {
  //获取当前按下键盘的键值
  var keycode = event.which;
  //处理回车的情况
  if (keycode == 13) {
  //获取到当前文本框中的内容
  var inputtext = $(this).val();
  //将td的内容修改成文本框中的内容
  tdObj.html(inputtext);
  }
  //处理esc的情况
  if (keycode == 27) {
  tdObj.html(text);
  }
 });
 });
});

这次代码稍微有点长,但是对于一目十行的大神们来说这都不算啥!

总结

HTML知识点:

  1. table中可以包含thead和tbody
  2. 表头的内容可以放到th中

CSS知识点:

  1. table{}这种写法称作标签选择器,可以对整个页面所有的table产生影响
  2. table td{}这种写法表示的是table中包含的所有td
  3. 可以通过border-collapse:collapse这种方式来使表格中的单元格的边框合并
  4. 当th上有背景色,这个th属于的tr上定义的背景色会无效
  5. css方法可以用于设定或获取节点的css属性,参数名是css的属性名

JavaScript知识点:

  1. (function())是(function())是(document).ready(function(){})的简化写法
  2. $(“tbody tr”)可以返回tbody中的所有tr节点
  3. $(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点
  4. jQuery的对象内容包含着选择器对应的DOM节点,以数组形式保存
  5. get方法可以获得jQuery对象中包含的某一个DOM节点
  6. function中的this代表执行这个function的对象
  7. $()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成jQuery对象
  8. children方法可以获得某个节点的子节点,可以指定参数来限制子节点的内容
  9. 如果选择器返回的jQuery对象中包含多个DOM节点,在这个对象上注册类是click这样的时间是,所有DOM节点都会用于事件
  10. html方法可以设置或获取节点的HTML内容
  11. val方法可以获取或设置节点的value值
  12. $()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成jQuery对象
  13. jQuery大部分方法都会返回执行这个方法的jQuery对象,因此可以采用链式方法的写法来编写给予jQuery的代码
  14. width方法可以设置或获取某个节点的宽度
  15. appendTo方法可以将一个节点追加到另一个节点所有子节点的后面
  16. 阻止事件传递可以让当前节点的事件返回false
  17. trigger该方法可以触发某个JavaScript的事件发生
  18. jQuery中某个实践方法的参数function上可以定义一个event的参数,jQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象
  19. jQuery的event对象上有一个which的属性,可以获得键盘按键的值
  20. 13表示回车键,27表示ESC键

end

谢谢您的阅读!

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

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现计算器功能
Oct 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
You might like
php实现多维数组排序的方法示例
2017/03/23 PHP
纯js写的分页表格数据为json串
2014/02/18 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python内置函数OCT详解
2016/11/09 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python实现对adb命令封装
2020/03/06 Python
python3爬虫中异步协程的用法
2020/07/10 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Python对excel的基本操作方法
2021/02/18 Python
毕业生文员求职信
2013/11/03 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
音乐教学反思
2014/02/02 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
董事长助理岗位职责
2014/02/18 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
计算机实训报告范文
2014/11/05 职场文书
怎么写工作检讨书
2014/11/16 职场文书
股份转让协议书范本
2015/01/27 职场文书
观看建国大业观后感
2015/06/01 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS