动态表格（20021118 改完）

windy2000 · 发表于 2002-11-10 19:58:00

主要特点：

任意标准数据表格（无跨行和跨列），只要设定 id （默认为 id = PowerTable ）即可生效！

任意修改、删除、编辑、表格行列，支持拖动表头交换列；

按列中英文排序（中文排序支持拼音和笔画，500 行中文排序不到 3 秒！感谢 myhyli 帮助，提高了排序速度）

倒出生成精简数据表（无冗余代码）

相关显示颜色可以通过下面变量自行定制
show_col = false;
charMode = 1;
act_bgc = "#BEC5DE";
act_fc = "black";
cur_bgc = "#ccffcc";
cur_fc = "black";

ATT. 如果在较大的页面中引用，请将 window.onload 事件的内容指向 PowerTable 之后！

PS. 我的汉字排序方法和秋水的应该至少是相当的，都是引用字表，取索引位，只是没有加上拼音识别罢了，就效率上应该相当的（原理都一样）！

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Power Table</title>
<style>
body{
	FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;
}
input {
	FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default;
}
table{
	font-size: 9pt;
	word-break:break-all;
	cursor: default;
	BORDER: black 1px solid;
	background-color:#eeeecc;
	border-collapse:collapse;
	border-Color:#999999;
	align:center;
}
</style>
<script language="JavaScript1.2">
/*
 This following code are designed and writen by Windy_sk <seasonx@163.net>
 You can use it freely, but u must held all the copyright items!
*/

var Main_Tab	= null;
var cur_row	= null;
var cur_col	= null;
var cur_cell	= null;
var Org_con	= "";
var sort_col	= null;

var show_col	= false;
var charMode	= 1;
var act_bgc	= "#BEC5DE";
var act_fc	= "black";
var cur_bgc	= "#ccffcc";
var cur_fc	= "black";

function init(){
	cur_row			= null;
	cur_col			= null;
	cur_cell		= null;
	sort_col		= null;
	Main_Tab 		= PowerTable;
	read_def(Main_Tab)
	Main_Tab.onmouseover	= overIt;
	Main_Tab.onmouseout	= outIt;
	Main_Tab.onclick	= clickIt;
	Main_Tab.ondblclick	= dblclickIt;
	Org_con			= Main_Tab.outerHTML;
	
	arrowUp = document.createElement("SPAN");
	arrowUp.innerHTML	= "5";
	arrowUp.style.cssText 	= "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";

arrowDown = document.createElement("SPAN");
	arrowDown.innerHTML	= "6";
	arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}

function window.onload(){
	init();
	
	drag = document.createElement("DIV");
	drag.innerHTML		= "";
	drag.style.textAlign 	= "center";
	drag.style.position 	= "absolute";
	drag.style.cursor 	= "hand";
	drag.style.border 	= "1 solid black";
	drag.style.display 	= "none";
	drag.style.zIndex 	= "999";
	
	document.body.insertBefore(drag);
	setInterval("judge_move()",100);
	setInterval("showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);

sel_Mode.selectedIndex=charMode;
}

function judge_move(){
	move[0].disabled=(cur_row == null || cur_row<=1);
	move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
	move[2].disabled=(cur_col == null || cur_col==0);
	move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}

document.onselectstart	= function(){return false;}

document.onmouseup	= drag_end;

function document.onclick(){
	window.status = "";
	clear_color();
	cur_row  = null;
	cur_col  = null;
	cur_cell = null;
}

function get_Element(the_ele,the_tag){
	the_tag = the_tag.toLowerCase();
	if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
	while(the_ele=the_ele.offsetParent){
		if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
	}
	return(null);
}

var dragStart		= false;
var dragColStart	= null;
var dragColEnd		= null;

tab_arr=(new Array(new Array(0,0))).concat(tab_arr);
	var temp = 1;
	var change_line=1;
	for(i=1;i<tab_arr.length;i++){
		//alert(tab_arr[temp][1] + ' - ' + temp)
		if(tab_arr[temp][1] != change_line){
			change_row(the_tab,tab_arr[temp][1],temp);
			tab_arr[temp][2] = true;
			temp = tab_arr[temp][1];
		}else{
			alert(change_line);
		}
	}
*/
	window.status = " (Time spent: " + (new Date - start) + "ms)";
}

function change_row(the_tab,line1,line2){
	the_tab.rows[line1].swapNode(the_tab.rows[line2])
}

function change_col(the_tab,line1,line2){
	for(var i=0;i<the_tab.rows.length;i++)
		the_tab.rows[i].cells[line1].swapNode(the_tab.rows[i].cells[line2]);
}

function Move_up(the_table){
	event.cancelBubble=true;
	if(cur_row==null || cur_row<=1)return;
	change_row(the_table,cur_row,--cur_row);
}

function Move_down(the_table){
	event.cancelBubble=true;
	if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
	change_row(the_table,cur_row,++cur_row);
}

function Move_left(the_table){
	event.cancelBubble=true;
	if(cur_col==null || cur_col==0)return;
	change_col(the_table,cur_col,--cur_col);
	if(cur_col==sort_col)sort_col=cur_col+1;
	else if(cur_col+1==sort_col)sort_col=cur_col;
}

function Move_right(the_table){
	event.cancelBubble=true;
	if(cur_col==null || cur_col==the_table.rows[0].cells.length-1)return;
	change_col(the_table,cur_col,++cur_col);
	if(cur_col==sort_col)sort_col=cur_col-1;
	else if(cur_col-1==sort_col)sort_col=cur_col;
}

function add_row(the_table) {
	event.cancelBubble=true;
	var the_row,the_cell;
	the_row = cur_row==null?-1:(cur_row+1);
	clear_color();
	var newrow=the_table.insertRow(the_row);
	for (var i=0;i<the_table.rows[0].cells.length;i++) {
		the_cell=newrow.insertCell(i);
		the_cell.innerText="NewRow_" + the_cell.parentElement.rowIndex;
	}
	read_def(the_table);
}

function del_row(the_table) {
	if(the_table.rows.length==1) return;
	var the_row;
	the_row = (cur_row==null || cur_row==0)?-1:cur_row;
	the_table.deleteRow(the_row);
	cur_row = null;
	cur_cell=null;
}

function add_col(the_table) {
	event.cancelBubble=true;
	var the_col,i,the_cell;
	the_col = cur_col==null?-1:(cur_col+1);
	var the_title=prompt("Please input the title: ","Untitled");
	if(the_title==null)return;
	if(the_col!=-1 && the_col<=sort_col && sort_col!=null)sort_col++;
	the_title=the_title==""?"Untitled":the_title
	clear_color();
	for(var i=0;i<the_table.rows.length;i++){
		the_cell=the_table.rows[i].insertCell(the_col);
		the_cell.innerText=i==0?the_title:("NewCol_" + the_cell.cellIndex);
	}
	read_def(the_table);
}

function del_col(the_table) {
	if(the_table.rows[0].cells.length==1) return;
	var the_col,the_cell;
	the_col = cur_col==null?(the_table.rows[0].cells.length-1):cur_col;
	if(the_col!=-1 && the_col<sort_col && sort_col!=null)sort_col--;
	else if(the_col==sort_col)sort_col=null;
	for(var i=0;i<the_table.rows.length;i++) the_table.rows[i].deleteCell(the_col);
	cur_col = null;
	cur_cell=null;
}

function res_tab(the_table){
	the_table.outerHTML=Org_con;
	init();
}

提示：您可以先修改部分代码再运行

colda · 发表于 2002-11-10 20:07:00

不错,先收下,回头仔细看看.

一地鸡毛 · 发表于 2002-11-10 20:41:00

good.佩服

V37 · 发表于 2002-11-11 00:35:00

nice!~~~~~~~~很实用！

收藏了~~~~~~

另外！加入colspan 和 rowSpan的控制更好！~~能做吗？
能加入更多的元素控制的话更方便~~

windy2000 · 发表于 2002-11-11 08:52:00

加入colspan 和 rowSpan的控制？

是指什么？？

不过，如果有跨行和跨列估计又得加上一堆判断~~~~~~~

说说你的想法先！！(^o^)

rib213 · 发表于 2002-11-11 11:27:00

你的那个不是insert row 而是append row啊

myhyli · 发表于 2002-11-11 12:03:00

说的对，应该用insertRow控制插入的位置

windy2000 · 发表于 2002-11-11 12:18:00

抱歉，我有点糊涂~~~~~~~

什么意思呀？？？

我用的就是 insertRow 呀！

可不可以具体一点？

darkvn · 发表于 2002-11-11 12:25:00

我改写的一个htc.选择功能比较强，以前贴过，搜索关了，找不到了。
[w]http://www.blueidea.com/user/darkvn/Scripts/magicTable/Demo.html[/w]

windy2000 · 发表于 2002-11-11 12:52:00

呵呵，是呀！

我以前看过，而且，数据就是引用的你的，不过，没有研究过源代码。

但是，程序真的都是我一行一行的按照自己的思路写的！！(^o^)

在功能上比你的还要差一些，呵呵，实践而已吗！！

是不是你天天都在呀！

呵呵，隐藏 boss ~~~~~~~

myhyli · 发表于 2002-11-11 13:58:00

我意思是应该在点击的地方插入一行，而不是添加到表格的最后

windy2000 · 发表于 2002-11-11 16:58:00

没问题呀!!

可以的!!

你试试看, 行列都没问题 !

cur_row; cur_col 就是为这个设置的 !

darkvn · 发表于 2002-11-11 17:02:00

myhyli在上个帖子中说

我意思是应该在点击的地方插入一行，而不是添加到表格的最后

有一个问题。
如果加到选择行的前面，则无法在最后面插入行。
如果加到选择行的后面，则无法在最前面插入行。

怎么办？？？

POPOEVER · 发表于 2002-11-11 17:02:00

不错，就是界面看着乱，最好提供表格尺寸及色彩定义，否则动来动去的看也看不清

myhyli · 发表于 2002-11-11 17:12:00

呵呵，DW和word都是一样处理的啊，插入的时候有选择，或者默认插入前面，可以更改这个默认设置

windy2000 · 发表于 2002-11-11 17:24:00

POPOEVER在上个帖子中说

不错，就是界面看着乱，最好提供表格尺寸及色彩定义，否则动来动去的看也看不清

表格根据实际情况设置，不便强行定义，其他的动态颜色可以通过下面的变量设置：
var act_bgc = "red";
var act_fc = "blue";
var cur_bgc = "yellow";
var cur_fc = "black";
呵呵，虽然不是色盲，但是对颜色实在是不敏感~~~~~~~~~

darkvn在上个帖子中说

有一个问题。
如果加到选择行的前面，则无法在最后面插入行。
如果加到选择行的后面，则无法在最前面插入行。

怎么办？？？

什么意思？插入位置吗？

那加一个判断就好了~~~~~不过，只是一个位置（顶和左边）的差别呀！

starsjz · 发表于 2002-11-11 18:26:00

这一点还不太完善: 在选中单元格上删除（增加）一行（列）之后，再继续增加或者删除，又从最后一行删除（增加）了

starsjz · 发表于 2002-11-11 18:34:00

小混蛋说的那个问题挺有意思的

我想可以添加一个“交换行“的按钮来解决

windy2000 · 发表于 2002-11-11 18:55:00

第一个意见已经改好了~~~~~~

“交换行“？？

呵呵，那倒是没什么问题（其实排序就是行的交换）！

明天再做，今天回家了~~~~~~~~~~~

明天做个强点的！！(^o^)

V37 · 发表于 2002-11-12 03:41:00

windy2000在上个帖子中说

加入colspan 和 rowSpan的控制？
是指什么？？
不过，如果有跨行和跨列估计又得加上一堆判断~~~~~~~
说说你的想法先！！(^o^)

如下！
值得尝试啊！！鼓励你~~~~~~~~~

肯定要复杂很多！但多设计不规则的表格是非常有用而强大的功能！

在一行中，如果某一<td>加入 colspan=n 则本行该</td>后drop掉n-1个<td></td>标记
在一列中，如果本列一<td>加入 rowspan=m 则该</td>所在行以后每行drop掉一个<td></td>标记共影像m-1行！

可以使用innerHtml 替换写入~~在输出时清除所有 id 标记

个人正面想法！估计实现起来稍微复杂些！

但如果没有colspan rowspan 的控制删和添加功能，是不完备的！
期待你做到！

能做到的！！支持一下~~

<table borderdakecolor=#ffffff borderlightcolor=#999999 border=1 bgcolor=#eeeeff width="95%" align=center cellspacing=0 >
<TR align=middle>
<TD colspan=3  bgcolor=#ffffee>==COLSPAN==</TD>

<TD>Last Name</TD>
</TR>
<TR>
<TD rowspan=4 bgcolor=#ffefee>==RowSPAN==</TD>
<TD>Schumacher</TD>
<TD>Ferrari</TD>
<TD>NewCol_3</TD></TR>
<TR>
<TD>Rubens</TD>
<TD>Barrichello</TD>
<TD>Ferrari</TD>

</TR>
<TR>
<TD>Ralph</TD>
<TD>Schumacher</TD>
<TD>Williams</TD>

</TR>
<TR>
<TD>Juan-Pablo</TD>
<TD>Montoya</TD>
<TD>Williams</TD>

</TR>
<TR>
<TD>David</TD>
<TD>Coulthard</TD>
<TD>McLaren</TD>
<TD>NewCol_3</TD></TR>
<TR>

<TD rowspan=3>Mika</TD>

<TD>Hakkinen</TD>
<TD>McLaren</TD>
<TD>dddd</TD></TR>
<TR>
<TD>Jarno</TD>
<TD>Trulli</TD>
<TD>Jordan</TD>

</TR>
<TR>
<TD>Ricardo</TD>
<TD>Zonta</TD>
<TD>Jordan</TD>

</TR>
<TR>
<TD>Olivia</TD>
<TD>Panis</TD>
<TD>BAR</TD>
<TD>NewCol_3</TD></TR></table>

提示：您可以先修改部分代码再运行

windy2000 · 发表于 2002-11-13 12:23:00

可算有点时间了~~~~~~~~~（中午休息1个半小时）

晕~~~~~~

加上了几个功能，改掉了几个 bug ，美化了一下界面（呵呵，借鉴了一下 darkvn 的
）

本来想把鼠标拖动也加上，时间太短，有空再说~~~~~~~

to : V37

你的意见我考虑过，实现上超困难~~~~

如果是单纯加上 colspan rowspan 的合并功能，倒是不难，我可以马上写出来，

而关键是在动态判断上，造成 table.rows 的 cells 集合极不规律，尤其是在 colspan 和 rowspan 混合出现的时候，结果几乎无法预测~~~~

而且，即使是实现了，每进行一次操作，都要遍历一遍所有单元格（在程序支持可以任意合并单元格的情况下），效率也会相当的低~~~~~~~

kill · 发表于 2002-11-13 16:58:00

提个建议，好象排序不支持汉字的，可以参照qiushu做的程序完成。
加个表头拖动功能。

windy2000 · 发表于 2002-11-13 17:22:00

已经加上了汉字排序功能

呵呵，方法有点土~~~~~

秋水的方法是什么？？？

还有，表头拖动可以通过列的移动来完成吧？？

呵呵，有时间我会加上的！！(^o^)

看到的，是好是不好给个意见好不好！！(~o~)

yanyan · 发表于 2002-11-13 17:42:00

221 undefined未定义
260 对象不支持此属性或方法

yanyan · 发表于 2002-11-13 17:55:00

145 obgc未定义

windy2000 · 发表于 2002-11-13 18:01:00

什么情况下出现的？

请具体一点好吗？？

对了，你是不是用 ie5.0 浏览的？？

这个东西只支持 ie5.5 以上的版本~~~~~~~~~

郴州风云网 · 发表于 2002-11-13 19:40:00

看后真是黯然神伤：（
这样的东西我得再学多少年才能“自己写”出来呀。

cgxstudio · 发表于 2002-11-13 20:32:00

呵呵，汉字排序的方法确实满土的，怪不得速度慢，能不能直接调客户端的字库阿？

windy2000 · 发表于 2002-11-13 20:33:00

加上了拖动表头交换列的功能 ~~~~~~~

to: 郴州风云网

无所谓了，我遍一些东西也仅仅是兴趣，语言的东西只要你肯学，剩下的就只是思路问题了！

其实，我也是今年下半年才开始详细接触 JavaScript 的，说来好笑，当时只是为了编一个 php 论坛，在贴子编辑的功能上想加一个 rtf 编辑器，于是上网找了一些资料来看！

呵呵，遇到了两个不错的论坛： 51js （好像是关了）和这里，才发现原来客户端的东西也可以有那么多的变化！

慢慢来吧，internet + 好的论坛 = 成功

V37 · 发表于 2002-11-13 20:50:00

帐号		自动登录	找回密码
密码			注册

动态表格（20021118 改完）

评分