javascript 动态生成表格

<! 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=gb2312" />
< title > javascript 动态生成表格 </ title >
</ head >
< body >
< form id = "form1" name = "form1" >
  < table id = "oTable" >
    < tbody id = "oTBody" >
    </ tbody >
  </ table >
  < SCRIPT LANGUAGE = "JScript" >
 
function test()
{
    var inputs=document.getElementsByTagName( "input" );
    for ( var i=0;i<inputs.length;i++)
    {
       if (inputs[i].type== "text" )
       {
           alert(inputs[i].id+ "=" +inputs[i].value);
       }
 
    }
}
 
// 接收参数 < 可修改 >
var rowNumbers=3; // 行;
var colNumbers=4; // 列;
 
// 设置表格属性;
var oCaption = oTable.createCaption(); // 在表格中创建空的 caption 元素;
var oTHead = oTable.createTHead(); // 在表格中创建空的 tHead 元素;
var oTFoot = oTable.createTFoot(); // 在表格中创建空的 tFoot 元素;
var oRow, oCell;
 
 
var heading = new Array();
 
/*------------- 列数 start------<head>-------*/
for ( var i=0;i<colNumbers+1;i++)
{  
    if (i==0)
    {
       heading[i]= "" ;      
    }
    else
    {
       heading[i]= "S" +(i);
    }
}
oRow = oTHead.insertRow(); // insertRow() 方法:在表格中创建新行 (tr) ,并将行添加到 rows 集合中;
 
for (k=0; k<colNumbers+1; k++)
{
    oCell = oRow.insertCell(); // insertCell() 方法: 在表格行 (tr) 中创建新单元格,并将单元格添加到 cells 集合中;
   oCell.align = "center" ;
    oCell.style.fontWeight = "bold" ;
    oCell.style.color= "#ffffff" ;
    oCell.innerHTML =heading[k];
   
 
    if (k==0)
    {
        oCell.bgColor = "#ffffff" ;
    }
    else
    {
       oCell.bgColor = "#666666" ;
    }
}
/*------------- 列数 end-------------*/
 
 
 
/*------------- 行数 start----<tbody>---------*/
var stock = new Array;
 
 
for ( var i=0;i<rowNumbers;i++)
{
    for ( var j=0;j<colNumbers;j++)
    {
       if (j==0)
       {
           stock[ "" +i+ "," +j+ "" ]= "R" +(i+1);
       }
       else
       {
           stock[ "" +i+ "," +j+ "" ]=j;
       }
 
    }
}
 
 
for (i=0; i<rowNumbers; i++)
{
  oRow = oTBody.insertRow();
  for (j=0; j<colNumbers+1; j++)
  {
    oCell = oRow.insertCell();
 
    // 背景色;
    if (j==0)
    {
        oCell.bgColor = "#999999" ;
    }
    else
    {
       oCell.bgColor = "#ffffff" ;
    }
   
    if (j==0)
    {
      oCell.innerHTML = stock[i + "," + j];
    }
    else
    {
      oCell.innerHTML = "<input type='text' id='" +stock[i+ "," +0]+ "_S" +j+ "' name='" +stock[i+ "," +0]+ "_S" +j+ "' value='' />" ;
    }
  }
}
/*------------- 行数 end-------------*/
 
/*----------------------foot start*/
oRow = oTFoot.insertRow();
oCell = oRow.insertCell();
 
oCell.innerText= "Author:maomao" ;
oCell.colSpan = colNumbers+1;
oCell.style.fontSize = "12" ;
oCell.align= "center" ;
oCell.bgColor = "ffffff" ;
 
 
oCaption.innerText = "alan.xue@ebizserve.com"
oCaption.style.fontSize = "12" ;
oCaption.align = "bottom" ;
/*----------------------foot end*/
 
 
 
function $(id) {
    return document.getElementById(id);
}
</ SCRIPT >
  < input type = "button" value = " 测试 " onclick = "javascript:test();" />
</ form >
</ body >
</ html >
 

本文出自 “霜之哀伤” 博客,请务必保留此出处http://maomao.blog.51cto.com/115985/63911

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值