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. Python生成8位随机密码

    #!/usr/bin/env python # -*- coding: utf- -*- import random import string #第一种方法 seed = "1234567 ...

  2. 用 mCustomScrollbar 滚动条插件实现滚动更新添加数据

    在公司的一个小项目中,需要从后台获取一大堆数据,为了用户体验的考虑,需要分部加载,然后就在网上找了很多的滚动插件,终于找到一个合适的.mCustomScrollbar插件地址 点击这里 它有各种各样的 ...

  3. struts2 radio标签 性别固定选项

    <s:radio list="#{'男':'man', '女':'woman'}" value="'男'" name="users.sex&qu ...

  4. 树形DP（Rebuilding Roads poj1947）

    题意:给出一颗树,求要形成一颗元素个数是p的子树,最少要去掉多少边 #include"stdio.h" #include"string.h" #include& ...

  5. 传递闭包+二进制位运算+floyd（poj2570）

    Fiber Network Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3125   Accepted: 1436 Des ...

  6. [转]easyui data-options的使用

    原文地址:easyui data-options的使用 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全 ...

  7. Java基础(48):归并排序的Java封装含原理，完整可运行，结合VisualGo网站更好理解）

    原理: 归并排序建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用. 将已有序的子序列合并,得到完全有序的序列:即先使每个子序列有序, ...

  8. 关于 static 的用途

    1.三个作用 第一个作用是 隐藏 输出: Hello 所有未加static前缀的全局变量和函数都具有全局可见性,其它的源文件也能访问.此例中,a是全局变量,msg是函数,并且都没有加static前缀, ...

  9. 生成apache证书(https应用)

    # cd /usr/local/apache2/conf# tar zxvf ssl.ca-0.1.tar.gz# cd ssl.ca-0.1生成根证书:# ./new-root-ca.sh      ...

  10. Linux内核之旅 链表实现

    #include "stdio.h" #include "stdlib.h" struct list_head{ struct list_head *prev; ...