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. ios问答题与答案

    1. OC中,与alloc语义相反的方法是dealloc还是release?与retain语义相反的方法是dealloc还是release?为什么?需要与alloc配对使用的方法是dealloc还是r ...

  2. C#线程系列讲座(1)：BeginInvoke和EndInvoke方法

    一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能,将要执行的任务分解成多个子任务执行.这就需要在同一个进程中开启多个 ...

  3. 链表操作，空间复杂度要求为O(1)

    对于O(1)的空间复杂度要求,不能对链表进行复制等操作,双指针法对处理该类问题比较有效. 同时由于链表头结点的特殊性,可以考虑引入一个空的头结点来辅助操作.

  4. 解决xcode6_beta没有代码提示的方法

    在beta版本的xcode6中我们会发现代码提示不怎么好使,但是看一些老外的视频,他们的代码提示却又是赶赶的.这是为什么呢?其实解决办法也很简单.就是在项目中不出现中文字符就好了.有的同学说,我没用中 ...

  5. PostgreSQL Configuration – managing scary settings

    When it comes to highly available database servers and configuration, a very important aspect is whe ...

  6. FlashBuilder 4.7 win64 和 mac版 下载地址

    win64 http://trials3.adobe.com/AdobeProducts/FLBR/4_7/win64/FlashBuilder_4_7_LS10_win64.exe mac http ...

  7. fighting_使用CSS美化文字

    CSS3颜色渐变 background-image:linear-gradient(black,blue,green,red); 默认从上到下显示. 示例代码: <!DOCTYPE html&g ...

  8. SQL between查询 范围查询

    --sal为员工工资 select * from emp;

  9. Java基础(47):插入排序的Java封装（含原理，可运行，哨兵位的理解见VisualGo上面的动态分析）

    直接插入排序(Straight Insertion Sorting)的基本思想:在要排序的一组数中,假设前面(n-1) [n>=2] 个数已经是排好顺序的,现在要把第n个数插到前面的有序数中,使 ...

  10. oracle 复杂语句

    select nvl(sum1,'0')as sum1,nvl(sum2,'0') as sum2,da2 from( select count(*) as sum1,substr(APPLY_DAT ...