<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tableDemo.aspx.cs" Inherits="window.showModalDialog__.tableDemo" %> <!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 runat="server"> <title>演示对table的动态操作</title> <link href="css/DomDemo.css" mce_href="css/DomDemo.css" rel="Stylesheet" /> <mce:script type="text/javascript" language="javascript"><!-- function AddCaption() { var caption = document.all.tableDemo.createCaption(); caption.innerText = "动态操作table"; } function AddRow() { var row = document.all.tableDemo.insertRow(document.all.tableDemo.rows.length); AddOption(document.all.dropRows, row.rowIndex + 1); } function AddColumn() { var i = document.all.dropRows.value; var column = document.all.tableDemo.rows[i - 1].insertCell(document.all.tableDemo.rows[i - 1].cells.length); column.innerHTML = column.cellIndex; } function AddOption(oSelect,num) { var oOption = document.createElement("option"); oOption.vale = oOption.text = num; oSelect.add(oOption); } // --></mce:script> <mce:style type="text/css"><!-- #tableDemo { border: 1px solid #000000; } --></mce:style><style type="text/css" mce_bogus="1"> #tableDemo { border: 1px solid #000000; } </style> </head> <body> <form id="form1" runat="server"> <div id="divContainer"> <div id="divMiddle"> <table id="tableDemo" class="table"> </table> <hr /> <a href="javascript:void(0);" mce_href="javascript:void(0);" οnclick="AddCaption();">添加标题(Caption)</a> <a href="javascript:void(0);" mce_href="javascript:void(0);" οnclick="AddRow()">添加行</a> | 在第<select size="1" id="dropRows"></select><a href="javascript:void(0);" mce_href="javascript:void(0);" οnclick="AddColumn()">添加一列</a> </div> </div> </form> </body> </html>