javascript 动态生成表格

最新推荐文章于 2022-03-21 00:44:56 发布

最新推荐文章于 2022-03-21 00:44:56 发布 · 96 阅读

文章标签：

本文介绍了一种使用JavaScript动态创建HTML表格的方法。通过设置表格的行数和列数，可以自动生成包含输入框的表格结构。此外，还展示了如何设置表格样式及如何通过脚本获取这些输入框中的值。

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