-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
182 lines (176 loc) · 7.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>excel</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.4.6.0.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/excel.js"></script>
<script type="text/javascript" src="js/windowFun.js"></script>
<link rel="stylesheet" href="css/excel.css" type="text/css"/>
<script type="text/javascript">
$(function () {
$(".excel").Excel(
{setting: {row: 50, col: 35}}
);
});
function getHtml(){
var t=$(".excel").getExcelHtml();
$('#getHtml').val(t);
}
function setHtml() {
$(".excel").setExcelHtml($('#getHtml').val());
}
</script>
</head>
<body>
<!--工具栏-->
<div class="toolbars">
<div class="group font">
<div class="body">
<div class="sub sub-top">
<select id="fontfamily" class="fontfamily">
<option value="微软雅黑" selected = "selected">微软雅黑</option>
<option value="SimHei">黑体</option>
<option value="SimSun">宋体</option>
<option value="NSimSun">新宋体</option>
<option value="FangSong">仿宋</option>
<option value="KaiTi">楷体</option>
</select>
<select id="fontsize" class="fontsize">
<option value="12px" selected = "selected">12</option>
<option value="14px">14</option>
<option value="15px">15</option>
<option value="16px">16</option>
<option value="18px">18</option>
<option value="20px">20</option>
<option value="22px">22</option>
<option value="24px">24</option>
<option value="26px">26</option>
<option value="28px">28</option>
<option value="36px">36</option>
<option value="48px">48</option>
<option value="72px">72</option>
</select>
</div>
<div class="sub sub-bottom">
<button type="button" class="tag-btn btn-bold">
<i class="tag bold"></i>
</button>
<button type="button" class="tag-btn btn-italic">
<i class="tag italic"></i>
</button>
<button type="button" class="tag-btn btn-underline">
<i class="tag underline"></i>
</button>
<button type="button" class="tag-btn btn-strike">
<i class="tag strike"></i>
</button>
<button type="button" class="tag-btn" id="bgColor">
<i class="tag bgColor"></i>
</button>
<input type="color" id="bgColorSelect" style="display: none">
<button type="button" class="tag-btn" id="fontColor">
<i class="tag fontColor"></i>
</button>
<input type="color" id="fontColorSelect" style="display: none">
</div>
</div>
<div class="foot">字体</div>
</div>
<div class="group alignment">
<div class="body">
<div class="sub sub-left">
<button type="button" class="tag-btn btn-htLeft btn-ah">
<i class="tag leftAlign"></i>
</button>
<button type="button" class="tag-btn btn-htCenter btn-ah">
<i class="tag levelAlign"></i>
</button>
<button type="button" class="tag-btn btn-htRight btn-ah">
<i class="tag rightAlign"></i>
</button>
<button type="button" class="tag-btn btn-htTop btn-av">
<i class="tag topAlign"></i>
</button>
<button type="button" class="tag-btn btn-htMiddle btn-av">
<i class="tag velAlign"></i>
</button>
<button type="button" class="tag-btn btn-htBottom btn-av">
<i class="tag bottomAlign"></i>
</button>
</div>
<div class="sub sub-right">
<button type="button" class="tag-btn merge-btn">
<i class="tag merge"></i> <span>合并单元格</span>
</button>
<button type="button" class="tag-btn split-btn">
<i class="tag split"></i> <span>拆分单元格</span>
</button>
</div>
</div>
<div class="foot">对齐方式</div>
<a class="corner_mark"></a>
</div>
<div class="group cells" style="padding: 0px 10px;">
<div class="body">
<div class="sub sub-right">
<ul class="border-btn select-ctrl-border">
<li class="borderTop"><i class="tag btn-borderTop"></i></li>
<li class="borderRight"><i class="tag btn-borderRight"></i></li>
<li class="borderBottom"><i class="tag btn-borderBottom"></i></li>
<li class="borderLeft"><i class="tag btn-borderLeft"></i></li>
<li class="borderAll"><i class="tag btn-borderAll"></i></li>
<li class="whiteSpace"><i class="tag wrap"></i></li>
<li class="borderColor"><i class="tag borderColor"></i></i></li>
<input type="color" id="borderColor" style="display: none"/>
<li class="borderStyle" style="position: relative">
<i class="tag borderStyleIcon"></i>
<div class="selectBorderStyle">
<div class="borderSolid borderStyleOption">实线</div>
<div class="borderDashed borderStyleOption">虚线</div>
<div class="borderDouble borderStyleOption">双线</div>
<div class="borderNone borderStyleOption">无线</div>
</div>
<!--用来记录选择的样式-->
<select class="borderStyleOption" style="display: none">
<option value="solid" selected = "selected">实线</option>
<option value="dashed">虚线</option>
<option value="double">双线</option>
<option value="none">无线</option>
</select>
</li>
</ul>
</div>
</div>
<div class="foot">单元格</div>
<a class="corner_mark"></a>
</div>
<div class="group edit">
<div class="body">
<div class="sub sub-left" style="width: 100px;">
<div class="input-group">
<label>列宽</label> <input type="number" id="cell-width" class="cell-width">
</div>
<div class="input-group">
<label>行高</label> <input type="number" id="cell-height" class="cell-height">
</div>
</div>
</div>
<div class="foot">编辑</div>
</div>
</div>
<!--输入框-->
<div style="width: 100%;display: flex;">
<input type="text" id="selectTdValue" style="width: 100%;outline:none;">
</div>
<div class="excel" onselectstart="return false">
</div>
<!--设计后获取表格的代码-->
<textarea id="getHtml"></textarea>
<input type="button" value="生成代码" onClick="getHtml()">
<!--再进入编辑状态，将代码还原-->
<input type="button" value="编辑已生成的表格" onClick="setHtml()">
</body>
</html>