[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>

转载于:https://www.cnblogs.com/lyggqm/p/5627566.html

[HTML]HTML5实现可编辑表格相关推荐

JS 可编辑表格的实现
1.实现效果用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化.先看下效果,如图: 2.设计思路先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画. ...
在可编辑表格EditorGrid中，我选择一行已输入的数据，点击删除按钮，该行数据将被删除，然后当我点击表单提交按钮时，已经被删除的那一行数据仍然被插入数据库中...
为什么80%的码农都做不了架构师?>>> 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍 ...
Markdown编辑表格时如何输入竖线（'|', pipe，vertical bar）
Markdown编辑表格时如何输入竖线 How to input '|'(pipe,vertical bar) in table in markdown editor? 主要思路: 竖线用 | 或者 ...
LigerUI编辑表格组件单元格校验问题
这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法问题1.从数据库查询出来的主键单元格不可编辑问题主键单元格已经保存之前编 ...
前台特效（3) 编辑表格
<!DOCTYPE html> <html><head><title>编辑表格</title><meta http-equiv=&qu ...
office2010表格计算机,2010年职称计算机考试：Word编辑表格
编辑表格 1.选定单元格: ◆选定一个单元格:指向单元格左边框,当光标变成实心箭头时单击. ◆选定一行:指向该项左外侧,当光标变成实心箭头时单击. ◆选定一列:指向该列顶端的网格线,当光标变成实心箭头 ...
android 编辑自定义可编辑表格,smart 框架列表可编辑表格
可编辑表格常用属性 colModel: [ {label: "主键ID", name: "hellop1",hidden:true}, {label: &quo ...
ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...
wps html编辑表格,手机wps中怎么编辑表格图文教程
我们可以在手机版本的wps中对表格进行编辑,对于新手来说可能不知如何操作,下面就让学习啦小编告诉你如何在手机wps中编辑表格的方法. 手机wps中编辑表格的方法首先,下载并安装Android WP ...

[HTML]HTML5实现可编辑表格

[HTML]HTML5实现可编辑表格相关推荐

最新文章

热门文章