给个例子给你参考:
<TABLE BORDER="1" id=table1>
<TR>
<TD>Stock Symbol</TD>
<TD>High</TD>
<TD>Low</TD>
<TD>Close</TD>
</TR>
<TR>
<TD>ABCD</TD>
<TD>88.625</TD>
<TD>85.50</TD>
<TD>85.81</TD>
</TR>
<TR>
<TD>EFGH</TD>
<TD>102.75</TD>
<TD>97.50</TD>
<TD>100.063</TD>
</TR>
<TR>
<TD>IJKL</TD>
<TD>56.125</TD>
<TD>54.50</TD>
<TD>55.688</TD>
</TR>
<TR>
<TD>MNOP</TD>
<TD>71.75</TD>
<TD>69.00</TD>
<TD>69.00</TD>
</TR>
</TABLE>
<input type=button value=insert onclick=xxx()>
<script>
function xxx() {var newrow=table1.insertRow();
for (i=0;i<4;i++) {
var newcell=newrow.insertCell(i);
newcell.innerText='new'+i;
}
}
</script>
<TABLE BORDER="1" id=table1>
<TR>
<TD>Stock Symbol</TD>
<TD>High</TD>
<TD>Low</TD>
<TD>Close</TD>
</TR>
<TR>
<TD>ABCD</TD>
<TD>88.625</TD>
<TD>85.50</TD>
<TD>85.81</TD>
</TR>
<TR>
<TD>EFGH</TD>
<TD>102.75</TD>
<TD>97.50</TD>
<TD>100.063</TD>
</TR>
<TR>
<TD>IJKL</TD>
<TD>56.125</TD>
<TD>54.50</TD>
<TD>55.688</TD>
</TR>
<TR>
<TD>MNOP</TD>
<TD>71.75</TD>
<TD>69.00</TD>
<TD>69.00</TD>
</TR>
</TABLE>
<input type=button value=insert onclick=xxx()>
<script>
function xxx() {var newrow=table1.insertRow();
for (i=0;i<4;i++) {
var newcell=newrow.insertCell(i);
newcell.innerText='new'+i;
}
}
</script>
解决方案 »
- 求段js代码,望高手指点~~
- 如何用javascript 实现16位的MD5算法
- extjs buttons在panel中的位置问题
- 用图片提交form表单,为什么后台显示提交两次?
- 如何让,鼠标移到图片的热点区时弹出相关的1-3级字菜单?
- Firefox 中用javascript 动态修改下拉框的selected值
- 如何使用javascript使得在某些控件的区域内鼠标滚轮的滚动不引起页面滚动?
- 请教javascript由tomcat迁移至websphere产生的问题.
- 关于execCommand()
- JavaWeb 调用手机摄像头扫描条码
- Js 获取表单多选框的值
- 给绑有编辑控件的文本域赋值问题,高人进????
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Document Object Model Table Sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex"><!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/msdn-online/shared/css/ie4.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END --></HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END--><BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000"><BLOCKQUOTE CLASS="body">
<!-- CONTENTS_START -->
<H1>Document Object Model Table Sample</H1><P>This sample demonstrates a table created with the Document Object Model.<!-- Placeholder for the table -->
<BLOCKQUOTE>
<DIV ID="oTableContainer"></DIV>
</BLOCKQUOTE><SCRIPT LANGUAGE="JScript">
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBody0 = document.createElement("TBODY");
var oTBody1 = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;// Declare stock data that would normally be read in from a stock Web site.
var heading = new Array;heading[0] = "Stock symbol";
heading[1] = "High";
heading[2] = "Low";
heading[3] = "Close";var stock = new Array;stock["0,0"] = "ABCD";
stock["0,1"] = "88.625";
stock["0,2"] = "85.50";
stock["0,3"] = "85.81";stock["1,0"] = "EFGH";
stock["1,1"] = "102.75";
stock["1,2"] = "97.50";
stock["1,3"] = "100.063";stock["2,0"] = "IJKL";
stock["2,1"] = "56.125";
stock["2,2"] = "54.50";
stock["2,3"] = "55.688";stock["3,0"] = "MNOP";
stock["3,1"] = "71.75";
stock["3,2"] = "69.00";
stock["3,3"] = "69.00";// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBody0);
oTable.appendChild(oTBody1);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.bgColor = "lightskyblue";// Create and insert cells into the header row.
for (i=0; i<4; i++)
{
oCell = document.createElement("TH");
oCell.innerText = heading[i];
oRow.appendChild(oCell);
}// Create and insert rows and cells into the first body.
for (i=0; i<2; i++)
{
oRow = document.createElement("TR");
oTBody0.appendChild(oRow);
for (j=0; j<4; j++)
{
oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
oRow.appendChild(oCell);
}
}// Set the background color of the first body.
oTBody0.bgColor = "lemonchiffon";// Create and insert rows and cells into the second body.
for (i=2; i<4; i++)
{
oRow = document.createElement("TR");
oTBody1.appendChild(oRow);
for (j=0; j<4; j++)
{
oCell = document.createElement("TD");
oCell.innerText = stock[i + "," + j];
oRow.appendChild(oCell);
}
}// Set the background color of the second body.
oTBody1.bgColor = "goldenrod";// Create and insert rows and cells into the footer row.
oRow = document.createElement("TR");
oTFoot.appendChild(oRow);
oCell = document.createElement("TD");
oRow.appendChild(oCell);
oCell.innerText = "Quotes are for example only.";
oCell.colSpan = "4";
oCell.bgColor = "lightskyblue";// Set the innerText of the caption and position it at the bottom of the table.
oCaption.innerText = "Created using Document Object Model."
oCaption.style.fontSize = "10";
oCaption.align = "bottom";// Insert the table into the document tree.
oTableContainer.appendChild(oTable);</SCRIPT>
<!-- CONTENTS_END --><!-- START_PAGE_FOOTER -->
<BR><BR><BR>
© <A CLASS="clsIncCpyRt" HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm" TARGET="_top"> 2002 Microsoft Corporation. All rights reserved. Terms of use</A>.
<!-- END_PAGE_FOOTER -->
</BLOCKQUOTE>
</BODY>
</HTML>
<script>
var tt=document.createElement("table");
var tbody=document.createElement("tbody")
tt.appendChild(tbody);
tt.border='1';
for(var i=0;i<3;i++)
{
var tr=document.createElement("tr");
for(var j=0;j<3;j++)
{
var hd=document.createElement("td");
hd.appendChild(document.createTextNode("测试"));
tr.appendChild(hd);
}
tbody.appendChild(tr);
}
document.body.appendChild(tt);
</script>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
onload=function()
{
for(var i=0;i<t.rows.length;i++)
{
for(var j=0;j<t.rows[i].cells.length;j++)
{
t.rows[i].cells[j].innerText=Math.random()+"";
eval("t.rows["+i+"].cells["+j+"].onclick=function(){alert(this.innerText)}");
}
}
}
//-->
</SCRIPT>
function createTable()
{
var table = document.createElement("table");
table.className="tw_table"
table.setAttribute("border","1");
table.setAttribute("width","100%");
document.body.appendChild(table);
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.bgColor="#ffcc00";
headerrow.insertCell(0).appendChild(document.createTextNode("1111"));
headerrow.insertCell(1).appendChild(document.createTextNode("2222"));
headerrow.insertCell(2).appendChild(document.createTextNode("3333"));
headerrow.insertCell(3).appendChild(document.createTextNode("4444"));
headerrow.insertCell(4).appendChild(document.createTextNode("5555"));
headerrow.insertCell(5).appendChild(document.createTextNode("6666"));
for (i=0;i<10;i++){
var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode("td1_"+i));
row.insertCell(1).appendChild(document.createTextNode("td2_"+i));
row.insertCell(2).appendChild(document.createTextNode("td3_"+i));
row.insertCell(3).appendChild(document.createTextNode("td4_"+i));
row.insertCell(4).appendChild(document.createTextNode("td5_"+i));
row.insertCell(5).appendChild(document.createTextNode("td6_"+i));
}
}
<body>
<div id=test></div>
<script>
var arrList = new Array(1000);
var b=new Date()
var sTmp = new Array();
for(i=0;i<arrList.length;i++){
sTmp[i]= '<tr><td>'+i+'</td></tr>';
}
test.innerHTML = '<table>'+sTmp.join("")+'</table>';
alert(new Date()-b)
</script>
</body>
<script defer>
for(var i=0;i<100;i++){
var tr=(i % 4==0)?t.insertRow():t.rows[t.rows.length-1]
tr.insertCell().innerHTML=i
}
</script>
其中i % 4 的这个4是列数,可以修改为自己要的数字。
行数就是 100 /4 修改100就是了。 100是所有单元格的数目
for(var i=0;i<100;i++) tr=(i % 4==0)?t.insertRow():t.rows[t.rows.length-1].insertCell().innerHTML=i