网页中模拟Excel电子表格实例分享

最新推荐文章于 2024-03-18 18:50:29 发布

啊飞啊飞飞飞飞

最新推荐文章于 2024-03-18 18:50:29 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/chengxuxiaoming/article/details/40401027

版权

本文提供了一个使用HTML、CSS和JavaScript实现的网页版Excel电子表格实例。用户可以输入表格标题、列名和初始行数，然后生成交互式的表格。表格支持键盘快捷键操作，如左右上下移动，以及鼠标悬停和点击时的样式变化。

摘要由CSDN通过智能技术生成

原文来自http://www.6excel.com/doc/20049

一.电子表格中用到的快捷键：

← → ↑ ↓ :左，右，上，下

Home ：当前行的第一列

End ：当前行的最后一列

Shift+Home ：表格的第一列

Shift+End：表格的最后一列

如图：

webexcel

代码如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
    <title>创建在线excel电子表格</title>
<link rel="stylesheet" href="dynamic_table.css" type="text/css"></link>
<script type="text/javascript" src="dynamic_table.js"></script></head>
<body>
    <div id="div2">
    <br><span>一.输入要创建表格的标题</span><br>
    <input type="text" size="20" id="text_1"><br><br>
    <hr>
    <span>二.输入要创建表格的列的名称</span>
    <div id="div1">
      <input type="button" value="添加输入文本框" class="a" id="inp_1"><br>
      <input type="text" size="20" id="column_name_1"><br>
    </div><br>
    <hr>
    <span>三.输入初始化表格的行数</span><br>
    <input type="text" id="text_2" maxlength="3"><br>
    <hr>
    <input type="button" value="生成表格" class="a" οnclick="sub()"><br>
    </div>
    <div id="div3"></div>
</body>
</html>

JS文件：

dynamic_table.js
1//表格的列数
2var td_num=1;
3//初始化表格的行数
4var init_tr_num=0;
5//定义行索引
6tr_index=0;
7//定义奇数行的背景色
8out_color1="#ffffff";
9//定义偶数行的背景色
10out_color2="#eeeeee";
11//定义鼠标经过每行时显示的背景色
12over_color&