- 时间：2022-08-16 18:58 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
要实现可编辑的表格功能，我们要解决以下问题：
1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）;
2.如何让单元格变成可以编辑的;
3.如何处理单元格的一些按键事件;
4.解决跨浏览器问题。
我们通过jQuery可以一步一步解决上述问题。
一、 绘制表格
首先我们先画好一个表格。
Code1:
[url=css/editTable.css]<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
[img]http://files.jb51.net/upload/20090828002026247.JPG[/img]
很明显它看起来不像一个表格，既没有边框，而且很丑。那么我们先给这个表格设置一些样式。
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
[img]http://files.jb51.net/upload/20090828002026332.JPG[/img]
但是单元格和单元格之间还是有重叠的边框，只需要在标签选择符table中加上这样一个属性就能去除重复边框：
border-collapse: collapse;
[url=http://xiazai.jb51.net/200908/yuanma/EditTable.rar]相关文档打包下载[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
