关于table表格的列移动问题

水妖精 · 2008-3-20 09:15

因为DOM文档对象只有针对行（row）移动的操作，所以列移动只能自己写函数，通过单元格的循环移动来实现。

测试代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script language="javascript">
function addCol(tableName,Row,Col)
{
var optTable=document.getElementById(tableName);
var newRowObj = null;
var newNameCell = null;
for(i=0;i<Row;i++)
{
newRowObj = optTable.rows(i);
for(j=1;j<=Col;j++)
{
newNameCell = newRowObj.insertCell(j);
if(i==0){
newNameCell.innerHTML = "tableColumn" + j;
}
else{
newNameCell.innerHTML = "i am " + j +" col";
}
}
}
}
function moveCol(tableName,startCol,endCol)
{
var optTable=document.getElementById(tableName);
var newRowObj = null;
var startCellObj = null;
var endCellObj = null;
var temp = null;
for(i=0;i<optTable.rows.length;i++)
{
newRowObj = optTable.rows(i);
startCellObj = newRowObj.cells(startCol);
endCellObj = newRowObj.cells(endCol);
temp=startCellObj.innerHTML;
startCellObj.innerHTML=endCellObj.innerHTML;
endCellObj.innerHTML=temp;
}
}
</script>
<table id="table1" border="2" onclick="moveCol(this.id,1,2)">
<tr>
<th>A</th><td><a href="##">A1</a></td><TD>A2</TD>
</tr>
<tr>
<th>B</th><td>B1</td><TD>B2</TD>
</tr>
<tr>
<th>C</th><TD>C1</TD><TD>C2</TD>
</tr>
</table>
</body>
</html>

复制代码

但是目前发现一个问题，通过读取数据库生成的表格，会提示没有对象的脚本错误。不知和解，请高手赐教。

水妖精 · 2008-3-20 14:06

目前是从数据库中按行循环读取的数据，如何使其中一行的buttom获取同列不同行的控件ID号呢？

徐志摩 · 2008-3-23 02:09

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
</head>
<body >
<script>
function addCol(tableName, Row, Col){
var optTable = document.getElementById(tableName);
var newRowObj = null;
var newNameCell = null;
for (i = 0; i < Row; i++) {
newRowObj = optTable.rows;
for (j = 1; j <= Col; j++) {
newNameCell = newRowObj.insertCell(j);
if (i == 0) {
newNameCell.innerHTML = "tableColumn" + j;
}
else {
newNameCell.innerHTML = "i am " + j + " col";
}
}
}
}
function moveCol(tableName, startCol, endCol){
var optTable = document.getElementById(tableName);
var newRowObj = null;
var startCellObj = null;
var endCellObj = null;
var temp = null;
for (i = 0; i < optTable.rows.length; i++) {
newRowObj = optTable.rows;
startCellObj = newRowObj.cells[startCol];
endCellObj = newRowObj.cells[endCol];
temp = startCellObj.innerHTML;
startCellObj.innerHTML = endCellObj.innerHTML;
endCellObj.innerHTML = temp;
}
}
function findIdByCol(){
var optTable = document.getElementById('table1');
var rows = optTable.rows;
//循环行
for (i = 0; i < rows.length; i++) {
cols = rows.getElement...yTagName('td');
//循环列
for (j = 0; j < cols.length; j++) {
//设置单击事件
cols[j].onclick = function(){
var msg = "";
for (m = 0; m < rows.length; m++) {
msg += rows[m].cells[this.cellIndex].id + "\n";
}
alert(msg);
}
}
}
}
</script>
<table id="table1" border="2">
<tr>
<td id="1_1_a" width="80px">
A
</td>
<td id="1_2_a1" width="80px">
<a href="##">A1</a>
</td>
<TD id="1_3_a2" width="80px">
A2
</TD>
</tr>
<tr>
<td id="2_1_b">
B
</td>
<td id="2_2_b1">
B1
</td>
<TD id="2_3_b2">
B2
</TD>
</tr>
<tr>
<td id="3_1_c">
C
</td>
<TD id="3_2_c1">
C1
</TD>
<TD id="3_3_c2">
C2
</TD>
</tr>
</table>
</body>
</html>

复制代码

你说的那个功能不知道上面算不算实现了？
另外，我认为可以通过解析ID的方式，查找同列元素ID。因为表格是通过数据对象循环取出并输入到窗体的，也就是可以在ID的格式上进行自定义，然后使用脚本通过对这种格式进行解析，来达到显示同列元素ID的效果（比如说利用上面代码中的格式，然后使用正则表达式进行匹配）。
呵呵~~我是这么想的~ 不知道对你有帮助没。XD..

ps:上面的脚本函数moveCol（）中的rows(XX)/cols(XX)都改成rows[XX]/cols[XX]了，否则在FF下不兼容~~

[ 本帖最后由徐志摩于 2008-3-25 02:07 编辑 ]

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

关于table表格的列移动问题

大神点评2

天健社区APP