Javascript 动态添加表格行(Tr),表格单元(Td) By shawl.qiu 2007-9-7

最新推荐文章于 2022-07-21 16:14:05 发布

btbtd

最新推荐文章于 2022-07-21 16:14:05 发布

阅读量4.2k

点赞数

文章标签： javascript function constructor prototype border callback

本文链接：https://blog.csdn.net/btbtd/article/details/1776199

版权

Me Script 同时被 2 个专栏收录

88 篇文章 0 订阅

订阅专栏

Me Script function library

34 篇文章 0 订阅

订阅专栏

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>

btbtd

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Javascript 动态添加表格行(Tr),表格单元(Td) By shawl.qiu 2007-9-7

Javascript 动态添加表格行(Tr),表格单元(Td) By shawl.qiu 2007-9-7说明:Table 的 innerHTML 在 IE 中是只读的, 所以要想通过 innerHTML 改变tr, td基本不行.当然, 你可以用一个标签容器, 再在容器里加 tr, td, 虽然这是一个办法, 不过貌似不很正统...所谓的正统, 无非就是使用 Table 各对象的属性方法
复制链接

扫一扫