JQuery实战--可以编辑的表格

页面导航:首页 > 网络编程 > JavaScript > JQuery实战--可以编辑的表格

JQuery实战--可以编辑的表格

来源: 作者: 时间:2016-02-02 09:59 【

廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线。还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表

廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线。还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格中的颜色,隔行变色等等,相关链接,请点击。

当时学习css的时候,关于表格和表单的所有设置,我们都是在html代码里面实现的,今天小编主要给大家讲解一下,如何利用JQuery+js+css实现表格的编辑。接下来,小编就简单总结一下如何实现这个小例子。

第一步:编写html代码,代码如下所示:

 


<script type=text/javascript src=js/jquery.js></script><script type=text/javascript src=js/editTable.js></script>
鼠标点击表格项就可以编辑
学号 姓名
000001 张三
000002 李四
000003 王五
000004 赵六

 

分析一下上面的代码,我们很容易看出来table中可以包含thead和tbody,表头的内容可以放到th中,我们来运行一下,看看我们的效果:

\

从上面的运行效果来看,我们很容易看出来,这个表格的基本轮廓已经显示出来,但是似乎少了些许味道,接着,我们来设置一下表格的样式,我们来编写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;  
}
分析一下上面的代码,table{}这种写法称作为标签选择器,可以对整个页面所有的table产生影响;table td{}这种写法表示的是table中包含的所有td;可以通过broder-collapse:collapse这种方式来使表格中的单元格边框合并。接着,我们连运行一下,看看运行的效果:

 

\

上述的运行效果,已经非常接近我们需要实现的效果了,但是还是欠点火候,还是不能都编辑,接着,js里面的代码,相应的,在js中我们也要建立两个文件,一个jquery一个editTable,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接,接着,我们来编写ueditTable的代码,来给整理页面添加行为能力:

 

//需要首先通过script来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//	
/
                 
                
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<