html 中实现 excel 效果

最新推荐文章于 2024-06-13 10:31:50 发布
最新推荐文章于 2024-06-13 10:31:50 发布
阅读量1.8k 收藏
点赞数
文章标签： excel html input border class javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu_nana/article/details/8013852
版权
<html>
<head>
<title>直接输入的Excel表格</title>
<script language="javascript" type="text/javascript">
function hilite(obj) {
 //选择包含<input>的<td>标记
 obj = document.getElementById("td"+obj.name.toString());
 obj.style.border = '2px solid #007EFF'; //加粗、变色
}
function delite(obj) {
 obj = document.getElementById("td"+obj.name.toString());
 obj.style.border = '1px solid #ABABAB'; //恢复回原来的边框
}
</script>
<style>
<!--
table.formdata{
 border:1px solid #5F6F7E;
 border-collapse:collapse;
 font-family:Arial;
}
table.formdata caption{
 text-align:left;
 padding-bottom:6px;
}
table.formdata th{
 border:1px solid #5F6F7E;
 background-color:#E2E2E2;
 color:#000000px;
 text-align:left;
 font-weight:normal;
 padding:2px 8px 2px 6px;
 margin:0px;
}
table.formdata td{
 margin:0px;
 padding:0px;
 border:1px solid #ABABAB; /* 单元格边框 */
}
table.formdata input{
 width:100px;
 padding:1px 3px 1px 3px;
 margin:0px;
 border:none;    /* 输入框不要边框 */
 font-family:Arial;
}
.btn{
 border:1px solid #0083f2;
 font-family:Arial;
}
-->
</style>
   </head>
<body>
<form method="post">
<table class="formdata">
<caption>公司销售统计表 2004～2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">硬盘(Hard Disk)</th>
 <td id="tdharddisk2004"><input type="text" name="harddisk2004" id="harddisk2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdharddisk2005"><input type="text" name="harddisk2005" id="harddisk2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdharddisk2006"><input type="text" name="harddisk2006" id="harddisk2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdharddisk2007"><input type="text" name="harddisk2007" id="harddisk2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
<tr>
 <th scope="row">主板(Mainboard)</th>
 <td id="tdmainboard2004"><input type="text" name="mainboard2004" id="mainboard2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdmainboard2005"><input type="text" name="mainboard2005" id="mainboard2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdmainboard2006"><input type="text" name="mainboard2006" id="mainboard2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdmainboard2007"><input type="text" name="mainboard2007" id="mainboard2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
<tr>
 <th scope="row">内存条(Memory Disk)</th>
 <td id="tdmemory2004"><input type="text" name="memory2004" id="memory2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdmemory2005"><input type="text" name="memory2005" id="memory2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdmemory2006"><input type="text" name="memory2006" id="memory2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdmemory2007"><input type="text" name="memory2007" id="memory2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
<tr>
 <th scope="row">机箱(Case)</th>
 <td id="tdcase2004"><input type="text" name="case2004" id="case2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdcase2005"><input type="text" name="case2005" id="case2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdcase2006"><input type="text" name="case2006" id="case2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdcase2007"><input type="text" name="case2007" id="case2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
<tr>
<th scope="row">电源(Power)</th>
 <td id="tdpower2004"><input type="text" name="power2004" id="power2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdpower2005"><input type="text" name="power2005" id="power2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdpower2006"><input type="text" name="power2006" id="power2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdpower2007"><input type="text" name="power2007" id="power2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
<tr>
 <th scope="row">CPU风扇(CPU Fan)</th>
 <td id="tdcpufan2004"><input type="text" name="cpufan2004" id="cpufan2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdcpufan2005"><input type="text" name="cpufan2005" id="cpufan2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdcpufan2006"><input type="text" name="cpufan2006" id="cpufan2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdcpufan2007"><input type="text" name="cpufan2007" id="cpufan2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
<tr>
<th scope="row">总计(Total)</th>
 <td id="tdtotal2004"><input type="text" name="total2004" id="total2004" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdtotal2005"><input type="text" name="total2005" id="total2005" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdtotal2006"><input type="text" name="total2006" id="total2006" onFocus="hilite(this);" onBlur="delite(this);"></td>
 <td id="tdtotal2007"><input type="text" name="total2007" id="total2007" onFocus="hilite(this);" onBlur="delite(this);"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>
1°叁柒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Excel转Html(一)-样式转化-CSS-border-style-属性
呼吸的小鱼博客
11-27 3799
1、EXCEL CellStyle类：               public static final short BORDER_DASHED = 3;          public static final short BORDER_HAIR = 7;     public static final short BORDER_DOUBLE = 6;          public sta...
【HTML5+XLSX】读取本地excel文件
weixin_43759956的博客
01-04 2489
html5 通过路径读取本地excel文件
Javascript 实现 Excel 导入生成图表功能
01-19
前一段时间做了一个用 JS 实现图表显示的功能，加上这次的Excel 导入功能，最终的效果是这样的： 怎么样？如果看了心动的话，就接着往下看吧。 本次的这个设计需要用到几个插件：jquery.js、xlsx.js、echarts.js，大家需要提前进行下载，之后新建demo.html，demo.js，style.css文件，然后新建一个你想要操作的EXCEL文件，我这里的例子是这样的： 好了，先看HTML代码，引入js，然后使用div布局，代码如下： <head> <meta charset=UTF-8> <meta name=viewport content=width=
实现Excel直接在以Html的形式在页面上展示
热门推荐
weixin_43663915的博客
12-22 1万+
目前大多数Excel内容需要在页面展示时，通常需要使用控件或将excel转为html的形式在页面上进行展示，但是经常会出现达不到理想的效果。本文主要使用NPOI读取excel内容以及单元格样式，然后使用jquery的datatables（官网：http://www.datatables.net/）插件来显示数据。 核心代码如下： 其中前端js代码如下，文件名为table.js(自己定就好了)：...
html实现粘贴excel数据，在页面表格中复制
最新发布
weixin_43805439的博客
06-13 631
Html table 实现Excel多格粘贴
前端仿Excel表格
电脑高级开关机工程师的博客
07-15 860
仿Excel表格 (原生JS)，持久化存储表格信息和样式
一款可以像excel一样进行编辑的前端表格，可以进行表格的编辑，合并，删除行，插入行等操作
12-12
一款可以像excel一样进行编辑的前端表格，可以进行表格的编辑，合并，删除行，插入行等操作。里面有例子， 直接打开html文件可以看到一个例子表格
JavaScript实现Excel表格效果
11-21
JavaScript实现Excel表格效果是网页开发中的常见需求，用于在网页上创建类似电子表格的数据展示和编辑功能。通过JavaScript，我们可以动态地控制表格的样式、内容和交互性，使其更接近Excel的功能。以下将详细讲解...
java后台html 转excel
08-25
在Java后台处理HTML数据并转换成Excel文件是一个常见的需求，特别是在数据分析、报表生成或导出功能中。这个技术涉及到HTML解析、数据提取...在实际开发中，应结合项目需求，选择合适的工具和策略，以实现最佳效果。
读取excel测试HTML_javascript实例_HTML读取Excel_
09-30
本实例探讨了如何利用JavaScript技术实现HTML页面对Excel文件的读取，从而实现前端与后端的互动。这一功能对于数据分析、表格导入等场景非常有用。以下是关于这个主题的详细知识点： 1. JavaScript基础： ...
Excel2html－纯java实现excel转html
05-23
在"Excel2html"中，开发者可能利用了POI库来解析Excel文件，获取每个单元格的内容、样式信息（如边框、颜色、字体、字号等），然后将这些信息转换为HTML标签和CSS样式，以重现Excel的视觉效果。 转换过程中，边框线...
table2excel
08-16
页面table2excel，个人觉得兼容性和使用简易性为最佳插件，不乱码、css样式导出、下载名称自定义等
js实现单元格拖拽效果
11-20
在JavaScript中实现单元格拖拽效果，主要是通过监听鼠标事件并改变元素的位置来完成的。以下将详细解析这个实例中的各个部分以及所涉及的关键知识点： 1. **CSS基础布局**： - `* { margin: 0; padding: 0; }` ...
html 导出到 excel
keye_web的博客
11-28 798
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
js操作html页面写入excel
tongle_deng的专栏
07-03 1万+
function MakeExcel(){ var i,j; try { var xls = new ActiveXObject ( "Excel.Application" ); } catch(e) { alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。
html字符串写入Excel,POI将html语句写入Excel，并保留格式
weixin_29043895的博客
06-04 610
嗯，最近在做单位内部使用的一个系统其中在前台使用FCKeditor编辑html，并将编辑的html文本保存在excel中这里涉及到两个问题一是：要将数据库中保存的html中的html标签去除二是：对于语句中的换行，使用poi是如何保持换行查阅了相关资料，解决的方法如下：一：使用正则表达式去除html语句中的html标签public static String splitAndFilterStrin...
html table 如何导出为excel表格案例分享
跟着飞哥学编程（全栈联盟）
09-08 5889
html table 如何导出为excel表格案例分享
html 读取 excel
05-09
总之，HTML读取Excel是一种常见的需求，通过具体的实现方法和技术，我们能够更好地控制数据和内容，实现更好的用户交互和展现效果。作为开发者，我们需要不断学习和更新技术，以满足不断变化的需求和要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值