基于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实现图片轮播效果
May 08 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
详解jQuery-each()方法
Mar 13 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery treeview树形结构应用
Mar 24 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
很可爱的输入框
2008/08/03 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python占位符输入方式实例
2019/05/27 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
大学校园毕业自我鉴定
2014/01/15 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
小学音乐教学反思
2014/02/05 职场文书
安全生产专项整治方案
2014/05/06 职场文书
爬山的活动方案
2014/08/16 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
护士旷工检讨书
2015/08/15 职场文书
话题作文之学会尊重
2019/12/16 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python中zipfile压缩包模块的使用
2021/05/14 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python