返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Saf

2020-05-22 17:11:52易采站长站整理

要实现可编辑的表格功能，我们要解决以下问题：
1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）;
2.如何让单元格变成可以编辑的;
3.如何处理单元格的一些按键事件;
4.解决跨浏览器问题。
我们通过jQuery可以一步一步解决上述问题。
一、 绘制表格
首先我们先画好一个表格。
Code1:

<!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=utf-8″ />
<title>jQuery的跨浏览器可编辑表格</title>
<link rel=”stylesheet” type=”text/css” href=”css/editTable.css” media=”all”/>
<script type=”text/javascript” src=”js/jquery-1.3.2.min.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>

画好表格以后显示的如图：
editTable01.jpg
 
很明显它看起来不像一个表格，既没有边框，而且很丑。那么我们先给这个表格设置一些样式。
Code2:

body{}{
font-size: 14px;
}
table{}{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
th{}{
width: 50%;
border: 1px solid #C1DAD7;
}
td{}{
width: 50%;
border: 1px solid #C1DAD7;
}

现在效果好多了：
editTable02.jpg
     
但是单元格和单元格之间还是有重叠的边框，只需要在标签选择符table中加上这样一个属性就能去除重复边框：
border-collapse: collapse;

table{}{
color: #4F6B72;

相关文章 大家在看