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