JS实现可编缉表格
JS实现可编缉表格代码,没有仔细斟酌过其实用性．仅仅为技术而技术的一篇博文．
参考网上不知哪位仁兄的代表(在这里强烈BS部分自动转载网站,转载倒没什么,至少标明出处,作者.更有甚者,转载的东西只是源文章的一少部分,实在成为互联网垃圾),做了改动,成了这篇博文.
由于工作较忙,就不多做解释,代码中的注释应该能帮助你了解实现的原理.
js代码部分
Code1 //*******************************************
2 // Copyright (C) 2008 晁方 版权所有
3 // 文件名：EditTable.js
4 // 文件功能描述：可编缉表格
5 // 晁方 20080918
6 //*******************************************
7
8
9 var x_Size = 10; // 表格行数
10 var y_Size = 5; // 表格列数
11 var cell_Width = 135 // 单元格宽度
12 var cell_Height = 20 // 单元格高度
13 var cell_BackColor = "#FFFFFF" // 单元格背景色
14 var table_BackColor = "#000000" // 表格背景色
15
16 //创建表格
17
18 table_str = "<table id='editTable' style='background-color:"+table_BackColor+";'cellspacing='1' cellpadding='1'> ";
19
20 for(var i=0; i<x_Size; i++)
21 {
22 table_str += "<tr>";
23 for(var j=0; j<y_Size; j++)
24 {
25 table_str += "<td style='width:"+cell_Width+"px;height:"+cell_Height+"px;background-color:"+cell_BackColor+";'>";
26 table_str += "</td>";
27 }
28 table_str += "</tr>";
29 }
30 table_str += "</table>";
31 document.write(table_str);
32
33
34 //创建 input 对象
35 var txt_input = document.createElement("input");
36
37 // 当文本框失去焦点时调用last
38 txt_input.onblur = last;
39 txt_input.type = "text";
40
41 // 得到当半单元格
42 var currentCell;
43
44 function editCell(event)
45 {
46 if(currentCell != null)
47 {
48 currentCell.innerHTML =txt_input.value;
49 }
50 if(event==null)
51 {
52
53 if(window.event.srcElement==txt_input)
54 {
55 return;
56 }
57 currentCell = window.event.srcElement;
58 }
59 else
60 {
61 currentCell = event.target;
62 }
63
64 // 用单元格的值来填充文本框的值
65 txt_input.value = currentCell.innerHTML;
66 currentCell.innerHTML ="";
67 // 把文本框加到法前单元格上
68 currentCell.appendChild(txt_input);
69 txt_input.focus();
70 }
71
72
73 function last()
74 {
75 // 充文本框的值给当前单元格
76 currentCell.innerHTML = txt_input.value;
77 }
78
79 //为表格绑定处理方法
80 document.getElementById("editTable").onclick = editCell;
HTML测试部分
Code1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>无标题页</title>
5 <style type="text/css">
6 <!--
7 input {
8 font-family: Geneva, Arial, Helvetica, sans-serif;
9 font-size: 12px;
10 color: #999999;
11 background-color: #FFFFE1;
12 border: 1px solid #999999;
13 }
14 -->
15 </style>
16 <script type="text/javascript" src="../Js/EditTable.js"></script>
17 <script type="text/javascript">
18 function out_Table()
19 {
20
21 var object_table = document.getElementById('editTable');
22 var span_txt = document.getElementById('txt_span');
23 var tableinfo = document.getElementById('txt_tableinfo');
24
25 tableinfo.innerText = "共有"+object_table.rows.length+"行,共有"+object_table.rows.item(0).cells.length+"列";
26 for(var i=0; i<object_table.rows.length; i++)
27 {
28 for(var j=0; j<object_table.rows.item(0).cells.length; j++)
29 {
30 span_txt.innerText += object_table.rows(i).cells(j).innerText + " ";
31 }
32
33 }
34
35 }
36
37 </script>
38
39
40 </head>
41 <body>
42 <div>
43 <input id="Button1" type="button" value="button" onclick="out_Table()"/>
44
45 <br/>
46 表格信息:<span id="txt_tableinfo"></span>
47 <br/>
48 <span id="txt_span"></span>
49
50
51 </div>
52 </body>
53
54 </html>
55
56
