HTML5实现的简单的可编辑表格

[HTML]代码

<!DOCTYPE html >

<html >

<head>

<meta charset="utf-8" />

<title>可编辑表格</title>

<script>

function addRow(){

    var oTable = document.getElementById("oTable");

    var tBodies = oTable.tBodies;

    var tbody = tBodies[0];

    var tr = tbody.insertRow(tbody.rows.length);

    var td_1 = tr.insertCell(0);

    td_1.innerHTML = "<div contenteditable='true'>第1列</div>";

    var td_2 = tr.insertCell(1);

    td_2.innerHTML = "<div contenteditable='true'>第2列</div>";

    }

</script>

</head>

<body>

<fieldset>

<legend>可编辑的表格</legend>

<table id="oTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%">

<thead>

<tr>

<th>第一列标题</th>

<th>第二列标题</th>

</tr>

</thead>

<tbody>

<tr>

<td><div contenteditable="true">第一行第一列</div></td>

<td><div contenteditable="true">第一行第二列</div></td>

</tr>

</tbody>

</table>

</fieldset>

<input type="button" onClick="addRow();" style="font-size:16px;" value="+"/>

</body>

</html>

[HTML]代码

<!DOCTYPE html >

<html >

<head>

<meta charset="utf-8" />

<title>可编辑表格</title>

<script>

function addRow(){

    var oTable = document.getElementById("oTable");

    var tBodies = oTable.tBodies;

    var tbody = tBodies[0];

    var tr = tbody.insertRow(tbody.rows.length);

    var td_1 = tr.insertCell(0);

    td_1.innerHTML = "<div contenteditable='true'>第1列</div>";

    var td_2 = tr.insertCell(1);

    td_2.innerHTML = "<div contenteditable='true'>第2列</div>";

    }

</script>

</head>

<body>

<fieldset>

<legend>可编辑的表格</legend>

<table id="oTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%">

<thead>

<tr>

<th>第一列标题</th>

<th>第二列标题</th>

</tr>

</thead>

<tbody>

<tr>

<td><div contenteditable="true">第一行第一列</div></td>

<td><div contenteditable="true">第一行第二列</div></td>

</tr>

</tbody>

</table>

</fieldset>

<input type="button" onClick="addRow();" style="font-size:16px;" value="+"/>

</body>

</html>
 

[HTML]HTML5实现可编辑表格的更多相关文章

  1. JS 可编辑表格的实现

    1.实现效果 用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化.先看下效果,如图: 2.设计思路 先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画. ...

  2. HTML5&CSS3经典动态表格

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  4. ExtJS4.2学习(七)EditorGrid可编辑表格(转)

    鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...

  5. jQuery实现可编辑表格

    在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...

  6. LigerUI编辑表格组件单元格校验问题

    这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...

  7. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  8. 实现Easyui 可编辑表格

    一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...

  9. Easyui 编辑表格行删除

    1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...

随机推荐

  1. 在CDialog::OnInitDialog设置DEFAULT-BUTTON的注意事项

    如果你的Dialog是在资源编辑器里面创建的,那么你首先要去资源编辑器把对应的Button的Default Button选项设置为True 另外,如果你使用GotoDlgCtrl,那么记得OnInit ...

  2. UIControl事件

    1.UIControlEventTouchDown 单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候. 2.UIControlEventTouchDownRepeat 多点触摸按下事件,点触计 ...

  3. 使用Fiddler对android应用抓包

    工作原理 先上个图 此图一目了然,可以看出fiddler在请求中所处的位置,我们就可以确定它能干些什么. 它实际工作在本机的8888端口http代理,我们启动fiddler时,它会自动更改代理设置: ...

  4. ORACLE 11G内存管理方式

    SGA包含的组件: 组件名 说明 参数 buffer cache 存放从数据文件中读取的数据拷贝,所有用户之间是可以共享的 db_cache_size db_keep_cache_size db_re ...

  5. JS语法部分

    定义变量使用通用类型var:字符串(需要引号),小数,整数,布尔型(只返回对或错),日期时间 算术运算符:+  —  *  /  %(1取余数,2判断是不是整数,3将某个数值变为某个范围之内的数,4判 ...

  6. zabbix添加邮件报警机制

    zabbix添加邮件报警机制 作者:尹正杰 还记得之前跟大家聊过的一个如何监控一个目录的话题吗?我们虽然监控出来数据了,也有数据了,但是,只是监控也没有用啊~因为我们不能24小时盯着屏幕然后 出了事情 ...

  7. 3D照片放大展示窗口

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. ajax测试异步提交

    今天测试了$.ajax()方法: $("a").click(function(){        $.ajax({           url:"MyJsp.jsp&qu ...

  9. 通过JavaScript设置样式和jQuey设置样式，还有随机数抛出水果的习题

    一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit');     shuiguo.style.bac ...

  10. oracle的系统文件的查询

    1:查看实例和数据库的相关信息 --查看实例 select instance_name,version,status,archiver,database_status from v$instance; ...