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. Xshell下VI打开文件中文乱码解决

    修改 /etc/sysconfig/i18n 成如下值:LANG="zh_CN.utf8"LANGUAGE="zh_CN.utf8"SUPPORTED=&quo ...

  2. 在Android平台下的基于Linux-C 的测试程序

    iTOP-4412 开发板可以运行的文件系统很多,在具体的文件系统上实现特定功能前,可以 使用Linux-C 程序来测试硬件以及驱动.而且这些程序很容易移植到Android.Qt/E 以及最小文件系统 ...

  3. Java基础之一组有用的类——使用Scanner对象（TryScanner)

    控制台程序. java.util.Scanner类定义的对象使用正则表达式来扫描来自各种源的字符输入,并把输入显示为各种基本类型的一系列标记或者显示为字符串. 默认情况下,Scanner对象读取标记时 ...

  4. max-min fairness 最大最小公平算法

    我们经常面临给一组用户划分稀有资源的问题,他们都享有等价的权利来获取资源,但是其中一些用户实际上只需要比其他用户少的资源.那么我们如何来分配资源呢?一种在实际中广泛使用的分享技术称作“最大最小公平分享 ...

  5. PostgreSQL Errors and Messages

    使用RAISE语句来报告消息并抛出错误 RAISE [ level ] ’format’ [, expression [, ... ]] [ USING option = expression [, ...

  6. ads 的一些错误

    遇到动不动就有*.o文件找不到的情况,而且通常都是开始的时候可以正常LINK,而经过若干次重新LINK后却找不到(即使只是在代码中加一个无关紧要得空格),新建个工程,将目前的.C和.H文件原封不动加进 ...

  7. 最长上升子序列的变形（N*log（N））hdu5256

    序列变换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. java中hashCode()方法的作用

    hashcode方法返回该对象的哈希码值.      hashCode()方法可以用来来提高Map里面的搜索效率的,Map会根据不同的hashCode()来放在不同的位置,Map在搜索一个对象的时候先 ...

  9. Linux 配置双机SSH信任

    一.实现原理 使用一种被称为"公私钥"认证的方式来进行ssh登录."公私钥"认证方式简单的解释是: 首先在客户端上创建一对公私钥(公钥文件:~/.ssh/id_ ...

  10. Linux mail 命令参数

    linux mail 命令参数: 使用mail发邮件时,必须先将sendmail服务启动. mail –s “邮件主题” –c”抄送地址” –b “密送地址” -- -f 发送人邮件地址 –F 发件人 ...