javascript 动态生成表格
2009-08-10 09:55
441 查看
<!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>
本文出自 “霜之哀伤” 博客,请务必保留此出处/article/4376368.html
<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>
本文出自 “霜之哀伤” 博客,请务必保留此出处/article/4376368.html
相关文章推荐
- JavaScript动态生成树形菜单创建表格
- Javascript动态生成表格的多种方式性能对比
- Javascript动态生成表格的性能调优
- JavaScript动态生成制定行数,列数,并制定表头的表格
- JavaScript 自定义动态生成表格
- Javascript动态生成表格的性能调优
- Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
- Javascript动态生成表格的性能比较和调优
- javascript 生成动态表格的各个属性
- JavaScript:一维数组动态生成N行N列table表格
- [Javascript]在HTML页面中动态添加表格,动态生成行的示例
- javascript 动态生成表格
- Javascript动态生成表格的性能调优
- Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
- Javascript动态生成表格,并添加按钮,页面加载自动实现
- 动态生成表格 - javascript
- DOM操作,javascript动态生成表格
- javascript动态生成表格
- 用按钮触发Javascript动态生成一个表格的代码
- javascript 生成动态表格的各个属性