您的位置：首页 > Web前端 > JQuery

【JQuery】可以编辑的表格实例

2017-01-09 15:02 435 查看

效果图

html代码

<!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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery实例1：可以编辑的表格</title>
<link type="text/css" rel="stylesheet" href="css/editTable.css">
<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>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</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:#99CCCC;
}

js代码

//需要首先通过JavaScript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
$(function(){
//找到表格的内容区域中除了第一个tr以外的所有的奇数行
//使用evev是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行
$("tbody tr:even").css("background-color","#CCCCFF");
//我们需要找到所有的学号单元格
var numTd=$("tbody td:even");
//给这些单元格注册鼠标点击的事件
numTd.click(function(){
//找到当前鼠标点击的td,this对应的就是响应了click的那个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")).val(text).appendTo(tdObj).trigger("focus").trigger("select");
//解决bug，点击出现代码
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的情况
if(keycode==27){
//将td中的内容还原成text
tdObj.html(text);
}
});
});
});

js代码中涉及到一个知识点链式JQuery代码，如下图所示：

链式JQuery代码减少了代码量和一些重复，算是对代码的优化吧。写更少的代码，做更多的事情。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航