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

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

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

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

今天学习到了一个实例,其名称为的可以编辑的表 26684;。其实现的效果是:点击页面上的单元 26684;,单元 26684;中的内容变成选中状态,变成可以输入的状态,向单元 26684;中输入内容,

  今天学习到了一个实例,其名称为的可以编辑的表格。其实现的效果是:点击页面上的单元格,单元格中的内容变成选中状态,变成可以输入的状态,向单元格中输入内容,按下回车,单元格保存其修改后的结果,按ESC,单元格的内容还原成原来的内容。其原理是:点击单元格的时候,在单元格内添加一个文本框,其大小充满整个单元格,其内容为单元格中的内容,修改后的内容重新赋给单元格。

  HTML代码:

  





    可以编辑的表格
    
    <script src="js/Jquery.js"></script>
    <script src="js/EditTable.js"></script>



    
鼠标点击表格就可以编辑
学号 姓名
0001 张三
0002 李四
0003 王五
0004 赵六
  CSS代码:

body {
}
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:blue;
}

  JQuery代码:

//解决奇偶行的背景色不一样
//$(document).ready(function () {

/
                 
                
Tags:

文章评论

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

<