Javascript 动态添加表格行(Tr),表格单元(Td) By shawl.qiu 2007-9-7
说明:
Table 的 innerHTML 在 IE 中是只读的, 所以要想通过 innerHTML 改变tr, td基本不行.
当然, 你可以用一个标签容器, 再在容器里加 tr, td, 虽然这是一个办法, 不过貌似不很正统...
所谓的正统, 无非就是使用 Table 各对象的 属性方法进行动态添加.
这就需要 insertRow, insertCell:
insertRow 返回 Row 对象(Tr)
insertCell 返回 Cell 对象(Td)
在添加 Row 和 Cell 时, 我们需要知道位置, 貌似 平面直角坐标系
x 代表 row
y 代表 cell
因此需要使用 callback 技术来确定位置...
ok, 不啰嗦, 具体看例子.
shawl.qiu
2007-09-07
http://blog.csdn.net/btbtd
演示:
http://files.myopera.com/btbtd/javascript/Js_Dynamic_Append_Row.htm
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template </title>
<style type="text/css">
/* <![CDATA[ */
.TblSolidBorder
{
/*
background-color:#FFFFFF !important;
*//*表格背景色绝对白色*/
border-collapse: collapse; /*清除 IE 的默认边框*/
border: 1px solid #999999;
}
.TblSolidBorder tr td
{
padding:2px!important;
}
.TblSolidBorder td, .TblSolidBorder th
{
border-top: 1px solid #999999; /* 设置 1px 比设置为 thin 通用 */
border-right: 1px solid #999999;
border-collapse: collapse; /*清除 IE 默认边框*/
padding:2px;
}
/* ]]> */
</style>
<script type="text/javascript">
/*<![CDATA[*/
if (navigator.appName=="Microsoft Internet Explorer")
{
//最大化窗口
self.moveTo(-5,-5)
self.resizeTo(screen.availWidth +8,screen.availHeight+8)
//这个脚本定义的宽度其实比原窗口还要大那么一点.
}
/*]]*/
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="TblSolidBorder" id="AuTable">
</table>
<script type="text/javascript">
/*<![CDATA[*/
String.prototype.Email =
function(sText, sAddi)
{
if(!sText) sText = this;
if(!sAddi) sAddi = '';
return fEmail(this, sText, sAddi);
}
String.prototype.Link =
function(sText, sAddi)
{
if(!sText) sText = this;
if(!sAddi) sAddi='';
return fLink(this, sText, sAddi);
};
function fEmail(sEmail, sText, sAddi)
{ // shawl.qiu code, return String
if(!sText) sText = sEmail;
if(!sAddi) sAddi='';
return ['<a href="mailto:'+sEmail+'"',sAddi,'>',sText,'</a>'].join('');
} // end function fEmail(sEmail, sText, sAddi)
function fLink(sLink, sText, sAddi)
{ // shawl.qiu code, return String
if(!sText) sText = sLink;
if(!sAddi) sAddi='';
return ['<a href="'+sLink+'"',sAddi,'>',sText,'</a>'].join('');
} // end function fLink(sLink, sText, sAddi)
var Au = {};
Au.Subject = 'shawl.qiu Javascript sqMusicPlayer class';
Au.Version = "v2.0";
Au.Name = "shawl.qiu";
Au.Email = "shawl.qiu@gmail.com";
Au.Blog = "http://blog.csdn.net/btbtd/";
Au.CreatedDate = '2007-5-7';
Au.Update = {};
Au.Update["1"] = "2007-5-11 v1.0 Final'";
Au.Update["2"] = "2007-9-7 v2.0'";
var AuTable = document.getElementById("AuTable");
var iCount = 0;
for(var i in Au)
{
if(typeof(Au[i])=="object") continue;
fAppendRow(AuTable, fRowCallback, fCellCallback, 2);
iCount ++;
}
var iCount = 0;
for(var i in Au.Update)
{
fAppendRow(AuTable, fRowCallback, fCellCallback1, 2);
iCount ++;
}
function fRowCallback(Row, iIndex)
{
if(iIndex%2) Row.style.backgroundColor = "#ffffff";
else Row.style.backgroundColor = "#E6E6E6";
}
function fCellCallback(Cell, iCellIndex, iRowIndex, TblEle)
{
switch(iCellIndex)
{
case 0:
Cell.width = 120;
Cell.align = "right";
Cell.valign = "top";
Cell.innerHTML = "Au[/""+i+"/"]: ";
break;
default:
if(//@/i.test(Au[i]))
{
Cell.innerHTML = " "+(Au[i].Email());
}
else if(//:/i.test(Au[i]))
{
Cell.innerHTML = " "+Au[i].Link();
}
else Cell.innerHTML = " "+Au[i];
Cell.align = "left";
Cell.valign = "top";
break;
}
if(iRowIndex===0&&iCellIndex===1)
{
Cell.style.color = "black";
Cell.style.fontWeight = "bold";
}
}
function fCellCallback1(Cell, iCellIndex, iRowIndex, TblEle)
{
switch(iCellIndex)
{
case 0:
Cell.width = 120;
Cell.align = "right";
Cell.valign = "top";
Cell.innerHTML = "Update[/""+i+"/"]: ";
break;
default:
Cell.innerHTML = " "+Au.Update[i];
Cell.align = "left";
Cell.valign = "top";
break;
}
}
function fAppendRow(Tbl, RowCallbackFunc, CellCallbackFunc, iCellsLen)
{ // shawl.qiu code, void return
var RowsLen = Tbl.rows.length;
var CellsLen = 1;
if(iCellsLen) CellsLen = iCellsLen;
else CellsLen = Tbl.rows[RowsLen-1].cells.length;
var Row = Tbl.insertRow(RowsLen);
if(RowCallbackFunc) if(RowCallbackFunc.constructor==Function)RowCallbackFunc(Row, RowsLen);
var bCellCallback = false;
if(CellCallbackFunc) if(CellCallbackFunc.constructor==Function) bCellCallback = true;;
for(var i=0; i<CellsLen; i++)
{
var Cell = Row.insertCell(i);
if(bCellCallback ) CellCallbackFunc(Cell, i, RowsLen, Tbl);
} // end for
} // end function fAppendRow(Tbl, RowCallbackFunc, CellCallbackFunc)
/*]]*/
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template </title>
<style type="text/css">
/* <![CDATA[ */
.TblSolidBorder
{
/*
background-color:#FFFFFF !important;
*//*表格背景色绝对白色*/
border-collapse: collapse; /*清除 IE 的默认边框*/
border: 1px solid #999999;
}
.TblSolidBorder tr td
{
padding:2px!important;
}
.TblSolidBorder td, .TblSolidBorder th
{
border-top: 1px solid #999999; /* 设置 1px 比设置为 thin 通用 */
border-right: 1px solid #999999;
border-collapse: collapse; /*清除 IE 默认边框*/
padding:2px;
}
/* ]]> */
</style>
<script type="text/javascript">
/*<![CDATA[*/
if (navigator.appName=="Microsoft Internet Explorer")
{
//最大化窗口
self.moveTo(-5,-5)
self.resizeTo(screen.availWidth +8,screen.availHeight+8)
//这个脚本定义的宽度其实比原窗口还要大那么一点.
}
/*]]*/
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="TblSolidBorder" id="AuTable">
</table>
<script type="text/javascript">
/*<![CDATA[*/
String.prototype.Email =
function(sText, sAddi)
{
if(!sText) sText = this;
if(!sAddi) sAddi = '';
return fEmail(this, sText, sAddi);
}
String.prototype.Link =
function(sText, sAddi)
{
if(!sText) sText = this;
if(!sAddi) sAddi='';
return fLink(this, sText, sAddi);
};
function fEmail(sEmail, sText, sAddi)
{ // shawl.qiu code, return String
if(!sText) sText = sEmail;
if(!sAddi) sAddi='';
return ['<a href="mailto:'+sEmail+'"',sAddi,'>',sText,'</a>'].join('');
} // end function fEmail(sEmail, sText, sAddi)
function fLink(sLink, sText, sAddi)
{ // shawl.qiu code, return String
if(!sText) sText = sLink;
if(!sAddi) sAddi='';
return ['<a href="'+sLink+'"',sAddi,'>',sText,'</a>'].join('');
} // end function fLink(sLink, sText, sAddi)
var Au = {};
Au.Subject = 'shawl.qiu Javascript sqMusicPlayer class';
Au.Version = "v2.0";
Au.Name = "shawl.qiu";
Au.Email = "shawl.qiu@gmail.com";
Au.Blog = "http://blog.csdn.net/btbtd/";
Au.CreatedDate = '2007-5-7';
Au.Update = {};
Au.Update["1"] = "2007-5-11 v1.0 Final'";
Au.Update["2"] = "2007-9-7 v2.0'";
var AuTable = document.getElementById("AuTable");
var iCount = 0;
for(var i in Au)
{
if(typeof(Au[i])=="object") continue;
fAppendRow(AuTable, fRowCallback, fCellCallback, 2);
iCount ++;
}
var iCount = 0;
for(var i in Au.Update)
{
fAppendRow(AuTable, fRowCallback, fCellCallback1, 2);
iCount ++;
}
function fRowCallback(Row, iIndex)
{
if(iIndex%2) Row.style.backgroundColor = "#ffffff";
else Row.style.backgroundColor = "#E6E6E6";
}
function fCellCallback(Cell, iCellIndex, iRowIndex, TblEle)
{
switch(iCellIndex)
{
case 0:
Cell.width = 120;
Cell.align = "right";
Cell.valign = "top";
Cell.innerHTML = "Au[/""+i+"/"]: ";
break;
default:
if(//@/i.test(Au[i]))
{
Cell.innerHTML = " "+(Au[i].Email());
}
else if(//:/i.test(Au[i]))
{
Cell.innerHTML = " "+Au[i].Link();
}
else Cell.innerHTML = " "+Au[i];
Cell.align = "left";
Cell.valign = "top";
break;
}
if(iRowIndex===0&&iCellIndex===1)
{
Cell.style.color = "black";
Cell.style.fontWeight = "bold";
}
}
function fCellCallback1(Cell, iCellIndex, iRowIndex, TblEle)
{
switch(iCellIndex)
{
case 0:
Cell.width = 120;
Cell.align = "right";
Cell.valign = "top";
Cell.innerHTML = "Update[/""+i+"/"]: ";
break;
default:
Cell.innerHTML = " "+Au.Update[i];
Cell.align = "left";
Cell.valign = "top";
break;
}
}
function fAppendRow(Tbl, RowCallbackFunc, CellCallbackFunc, iCellsLen)
{ // shawl.qiu code, void return
var RowsLen = Tbl.rows.length;
var CellsLen = 1;
if(iCellsLen) CellsLen = iCellsLen;
else CellsLen = Tbl.rows[RowsLen-1].cells.length;
var Row = Tbl.insertRow(RowsLen);
if(RowCallbackFunc) if(RowCallbackFunc.constructor==Function)RowCallbackFunc(Row, RowsLen);
var bCellCallback = false;
if(CellCallbackFunc) if(CellCallbackFunc.constructor==Function) bCellCallback = true;;
for(var i=0; i<CellsLen; i++)
{
var Cell = Row.insertCell(i);
if(bCellCallback ) CellCallbackFunc(Cell, i, RowsLen, Tbl);
} // end for
} // end function fAppendRow(Tbl, RowCallbackFunc, CellCallbackFunc)
/*]]*/
</script>
</body>
</html>