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