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. category应用（计算nssting的数量）

    // //  main.m //  03-分类应用 // //  Created by apple on 14-3-18. //  Copyright (c) 2014年 apple. All rig ...

  2. java对象占多少内存

    通常来说Hotspot jvm的对内存中的对象由以下几个部分组成 一个对象头,包含了一些整理工作所需信息 原始类型字段,不同类型大小各异(表1) 引用字段,占据4个字节(byte) 填充,在对象的末尾 ...

  3. 客户端 ios与android 的判断

    <script> if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgen ...

  4. UITabBarController底层实现

    1.首先要了解:任何控制器,都能添加子控制器      UIViewController里面有一个方法:     - (void)addChildViewController:(UIViewContr ...

  5. 从零开始攻略PHP（6）——代码重用与函数编写的一些注意事项

    一个新的项目是这样创建的:它将已有的可重新利用的组件进行组合,并将新的开发难度降低到最小. 代码重用的好处:降低成本.提升可靠性和一致性. 1.使用require()和include()函数 使用一条 ...

  6. PostgreSQL Replication之第十三章 使用PL/Proxy扩展（3）

    13.3 聪明地扩展与处理集群 建立集群不是您面临的唯一任务.如果所有的事情都做完了并且系统已经运行了,您可能需要到处调整配置. 13.3.1 添加和移动分区 一旦一个集群启动并运行,您可能会发现您的 ...

  7. jvm内存设置

    JVM有很多个内存管理命令,总体而言,分为两类: 1.-X开头的管理命令:这些选项在JDK升级时不会通知修改: 2.-XX开头的管理命令:这些选项不够稳定,所以建议少用. JVM参数的含义: 参数名称 ...

  8. PHP上传图片时，如何判断上传的文件是否为可用的图片文件

    利用getimagesize函数: function isImage($filename){$types = '.gif|.jpeg|.png|.bmp';//定义检查的图片类型if(file_exi ...

  9. HDU 5000 Clone（离散数学+DP）（2014 ACM/ICPC Asia Regional Anshan Online）

    Problem Description After eating food from Chernobyl, DRD got a super power: he could clone himself ...

  10. WebView自适应屏幕大小

    webView.getSettings().setUseWideViewPort(true); webView.getSettings().setLoadWithOverviewMode(true); ...