[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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/490404.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python random用法_python random 的用法

python random的里面的方法其实是Random实例化的对象。下面是几个常用的几个 import randomprint(random.randint(1,10))# 产生 1 到 10 的一个整数型随机数print(random.random())# 产生 0 到 1 之间的随机浮点数print(random.uniform(1.1,5.4))# 产生 1.1 到 5.4 之间的随机浮…

它指导了计算机行业大半个世纪的发展,如今却要走下神坛?

来源&#xff1a;托尼前几天&#xff0c;有这样一条新闻。全球最大的芯片代工巨头台积电&#xff0c;其高管力挺摩尔定律&#xff0c;认为这个定律没有消亡&#xff0c;仍然可以通过增加晶体管密度&#xff0c;实现计算性能的提高。事实上&#xff0c;在摩尔定律是否已经失效这…

nodejs+kafka+storm+hbase 开发

1.环境介绍 如图所示&#xff0c;NODEJS做为数据源的的产生者产生消息&#xff0c;发到Kafka队列&#xff0c;然后参见红线&#xff0c;表示本地开发的环境下数据的流向&#xff08;本地开发时&#xff0c;storm topology运行在本地模式&#xff09; 2.搭建环境,我采用的是ecli…

将代码美观地复制到word的网站

http://www.codeinword.com/ 左边是源代码&#xff0c;右边是排版后的代码&#xff0c;复制右边的代码粘贴到word&#xff0c;可以使得word中的代码美观

c# 网口相机可以通过_电脑可以跑安卓9.0了!完全免费

Android早已超过Windows&#xff0c;坐拥全球用户量最大的操作系统宝座。这么高的人气&#xff0c;当然会有很多可玩性&#xff0c;比如Android -x86项目&#xff0c;即在x86处理器平台上运行Android。据悉&#xff0c;底层升级为Android 9 Pie(android-9.0.0_r50)的x86项目已经…

我的runtime学习笔记

0、简介&#xff1a; OC方法不同于C语言函数&#xff0c;属于动态调用过程&#xff0c;在编译的时候并不能决定真正调用哪个函数&#xff0c;只有在真正运行的时候才会根据函数的名称找到对应的函数来调用。 至于其他理论上的东西不必讲太多&#xff0c;编程讲的就是实用性&…

详解工业机器人和机械手臂的区别

来源&#xff1a;工业机器人目前市场上出现许多机械臂&#xff0c;很多小伙伴不能区分机械臂和机器人是不是同一种概念&#xff0c;今天小编和大伙讲解讲解。机械臂是一种机械装置&#xff0c;可以是自动的也可以是人为控制的&#xff1b;工业机器人是一种自动化设备&#xff0…

php 实时监测网站是否异常_网站跳转劫持解决,网站跳转劫持解决方法只有3步...

某一客户单位的网站首页被篡改&#xff0c;并收到网检的通知说是网站有漏洞&#xff0c;接到上级部门的信息安全整改通报&#xff0c;贵单位网站被植入木马文件&#xff0c;导致网站首页篡改跳转到彩票网站&#xff0c;根据中华人民共和国计算机信息系统安全保护条例以及信息安…

带虚函数的类的sizeof分析

一个类中若有虚函数&#xff0c;&#xff08;不论是自己的虚函数&#xff0c;还是继承而来的&#xff09;&#xff0c;那么类中就有一个成员变量&#xff1a;虚函数指针。虚函数指针占4字节 直接看例子&#xff1a; class base1{ private:int a; public:virtual void fun1(){…

大脑通过统计推理表征“自我”

来源&#xff1a; 脑智卓越中心9月3日&#xff0c;《美国科学院院刊》在线发表了题为《猕猴对自我身体表征的统计推理》的研究论文。该研究由中国科学院脑科学与智能技术卓越创新中心&#xff08;神经科学研究所&#xff09;、上海脑科学与类脑研究中心、灵长类神经生物学重点实…

java 获取当前classpath的绝对路径

/* * URI:绝对路径 */ System.out.println("当前类ReadTest.class文件的URI\n" ReadTest.class.getResource("")); System.out.println("当前classpath的URI\n" ReadTest.class.getResource("/")); System.out.println("…

python压缩教程_Python压缩模块zipfile实现原理及用法解析

一、python压缩模块简介python直接通过内置压缩模块可以直接进行压缩文件的创建&#xff1b;内置模块 zipfile/rarfile 完成压缩文件的操作。二、 zipfile模块基础使用2.1 对一个文件进行zip压缩# 把当前目录的test.txt文件压缩到a.zip压缩包中import zipfilef zipfile.ZipFil…

关于未来50年的工作与生活,三星联合未来学家们做出了这些预测

来源&#xff1a;资本实验室8月底&#xff0c;三星公司为庆祝其位于伦敦的新体验空间Samsung KX投入运营&#xff0c;委托英国的几位专家学者和未来学家们共同研究&#xff0c;并发布了一份题为《三星KX50&#xff1a;聚焦未来》的报告。根据该报告的预测&#xff0c;到2069年&…

C++ 多继承中的多义性

如果一个子类继承多个基类&#xff0c;这多个基类都有一个相同的函数&#xff0c;那么子类调用这个相同的函数就会产生多义性&#xff0c;编译就不能通过&#xff1a; class base1{ public:virtual void fun1(){ cout << "1" << endl; } }; class base2…

Samba Linux 和windows 共享

1.安装Samba (yum install Samba) 2.配置Samba &#xff08;Samba的配置文件为/etc/samba/smb.conf&#xff09; 1&#xff09;打开smb.conf vim /etc/samba/smb.conf 2)将文件中的内容做如下相应修改&#xff1a;    #securityuser 后面添加&#xff1a; secur…

python文本字符串比对_python-模糊字符串比较

python-模糊字符串比较我正在努力完成的是一个程序&#xff0c;该程序读取文件并根据原始句子比较每个句子。 与原始句子完全匹配的句子将得到1分&#xff0c;而与之相反的句子将得到0分。所有其他模糊句子将得到1到0分之间的分数。我不确定要使用哪种操作在Python 3中完成此操…

C++判断字符是字母或数字

判断字符是字母&#xff1a;isalpha() 判断字符是数字&#xff1a;isdigit() 判断字符是字母或数字&#xff1a;isalnum()

获取版本号

-(NSString*)version; { NSDictionary *infoDictionary [[NSBundle mainBundle] infoDictionary]; CFShow((__bridge CFTypeRef)(infoDictionary)); // app版本 NSString *app_Version [infoDictionary objectForKey:"CFBundleShortVersionString"]; return app_Ve…

深度!全球机器人产业趋势及特征分析

来源&#xff1a;AI城市智库当前&#xff0c;全球机器人市场规模持续扩大&#xff0c;工业机器人市场增速回落&#xff0c;服务、特种机器人增速稳定。技术创新围绕仿生结构、人工智能和人机协作不断深入&#xff0c;产品在教育陪护、医疗康复、危险环境等领域的应用持续拓展&a…

设计代码说明什么是多态性?如何实现多态?(代码中要写注释解释)_狗屎一样的代码!快,重构我...

关注后你就是我的人了重构不止是代码整理&#xff0c;它提供了一种高效且受控的代码整理技术。&#xff08;一&#xff09;重构原则1、何谓重构对软件内部结构的一种调整&#xff0c;目的是在不改变软件可观察行为的前提下&#xff0c;提高其可理解性&#xff0c;降低其修改成本…