关于table表格的列移动问题 - 大连天健网--天健社区

<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>

复制代码

<!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>

复制代码