[HTML]HTML5实现可编辑表格
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实现可编辑表格的更多相关文章
- JS 可编辑表格的实现
1.实现效果 用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化.先看下效果,如图: 2.设计思路 先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画. ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...
- jQuery实现可编辑表格
在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...
- LigerUI编辑表格组件单元格校验问题
这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...
- LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法
LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...
- 实现Easyui 可编辑表格
一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...
- Easyui 编辑表格行删除
1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...
随机推荐
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
- javascript中argument1 === void 0的意思
今天看代码时看到 if (argument1 === void 0 || typeof argument1 === 'object') { 啥意思? 概述 void 运算符会对它的操作数表达式进行求值 ...
- JQuery实现页面企业广告图片切换和新闻列表滚动效果
最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Building a RESTful Web Service Using Spring Boot In Eclipse
一.构建restful web service 创建Maven的java web工程,maven的pom文件加入依赖包 创建包hello Greeting.java package hello; pu ...
- MVC 学习系列-Controller
MVC最核心的也就是Controller了,控制器(controller)在功能中起到了核心功能. 1,)在MVC类库中,根据URL,通过MVCHandler进入MVC处理系统中, 2,)解析初始化对 ...
- Swift游戏实战-跑酷熊猫(一) 简介 (含源代码)
优酷观看地址:http://v.youku.com/v_show/id_XNzM2Nzc2MTIw.html 通过这个小游戏,我们能够接触到物理系统(SKPhysicsBody,physicsWorl ...
- 一个新人对JavaScript的内容简单介绍
JavaScript 1.基本的数据类型:字符串 小数 整数 时间日期 布尔型等. 2.变量: JS定义变量通通都是用var开头,var里面可以放任何东西(如:小数,整数,字符串,时间日期等等 ...
- adb devices 显示error
1.adb kill-server 2.adb start-server
- 分层导航and隐藏导航
一.分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- java - Annotation元数据
Annotation元数据(一) 一.Annotation究竟是什么? 是java5.0中的新特征 数据的数据(元数据) Annotation和访问修饰符一样,应用于包.类型.构造方法.方法.成员变量 ...