如何用javascripr动态添加table?

lxg2000 2002-03-15 09:30:42

...全文

288 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

baojun 2002-03-15

打赏
举报

使用 <DIV> 元素。
在 javascript 脚本中可以动态改变 <DIV> 元素中的内容。

孟子E章 2002-03-15

打赏
举报

oTableContainer.removeChild(oTable);

zl17 2002-03-15

打赏
举报

哈哈，有意思，
孟兄，删除呢，怎么做？

孟子E章 2002-03-15

打赏
举报

下面的方法也可以，方法很多：
<div id=DivID></div>
<input type=button onclick="test()" value="addd">
<script>
function test(){
var sHTML="<table border='2'><tr><td>test</td><tr></table>"
document.all.DivID.insertAdjacentHTML("afterBegin",sHTML );
}
</script>

孟子E章 2002-03-15

打赏
举报

<TABLE ID="oTable" BORDER BGCOLOR="lightslategray">
<TBODY ID="oTBody0"></TBODY>
<TBODY ID="oTBody1"></TBODY>
</TABLE>

<SCRIPT LANGUAGE="JScript">
// Declare variables and create the header, footer, and caption.
var oTHead = oTable.createTHead();
var oTFoot = oTable.createTFoot();
var oCaption = oTable.createCaption();
var oRow, oCell;
var i, j;

// Declare stock data that would normally be retrieved 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 a row into the header.
oRow = oTHead.insertRow();
oTHead.bgColor = "lightskyblue";

// Insert cells into the header row.
for (i=0; i<4; i++)
{
oCell = oRow.insertCell();
oCell.align = "center";
oCell.style.fontWeight = "bold";
oCell.innerText = heading[i];
}

// Insert rows and cells into the first body.
for (i=0; i<2; i++)
{
oRow = oTBody0.insertRow();
for (j=0; j<4; j++)
{
oCell = oRow.insertCell();
oCell.innerText = stock[i + "," + j];
}
}

// Set the background color of the first body.
oTBody0.bgColor = "lemonchiffon";

// Insert rows and cells into the second body.
for (i=2; i<4; i++)
{
oRow = oTBody1.insertRow();
for (j=0; j<4; j++)
{
oCell = oRow.insertCell();
oCell.innerText = stock[i + "," + j];
}
}

// Set the background color of the second body.
oTBody1.bgColor = "goldenrod";

// Insert rows and cells into the footer row.
oRow = oTFoot.insertRow();
oCell = oRow.insertCell();
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 Table Object Model."
oCaption.style.fontSize = "10";
oCaption.align = "bottom";
</SCRIPT>

孟子E章 2002-03-15

打赏
举报

<DIV ID="oTableContainer"></DIV>

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

lxg2000 2002-03-15

打赏
举报

<body bgcolor="#FFFFFF" text="#000000">
<select name="li">
<option value="1">aaa</option>
<option value="2">bbb</option>
<option value="3">ccc</option>
</select>
<input type="submit" name="Submit" value="Submit" onclick="aa()">
<table width="100%" border="1">
<script language="javascript">
function aa()
{

document.write("<TR><TD>hg</TD></TR>")
}
</script>
</table>
</body>
结果是将原有控件替换，我不想替换原有控件如何解决？