📄 javascript操作table对象的方法.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0050)http://wolf.iispace.cn/ShowBlog/gu/xin/jtable.aspx -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>狼 - 狼顾 - 狼心</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK
href="javascript操作table对象的方法.files/Default.css" type=text/css
rel=stylesheet><LINK href="javascript操作table对象的方法.files/Frame.css" type=text/css
rel=stylesheet>
<SCRIPT src="javascript操作table对象的方法.files/boxover.js"></SCRIPT>
<META content=2007.7.1.28272 name=Version>
<META content="MSHTML 6.00.2900.3314" name=GENERATOR></HEAD>
<BODY>
<FORM id=aspnetForm name=aspnetForm
onsubmit="javascript:return WebForm_OnSubmit();" action=jtable.aspx method=post>
<DIV><INPUT id=__EVENTTARGET type=hidden name=__EVENTTARGET> <INPUT
id=__EVENTARGUMENT type=hidden name=__EVENTARGUMENT> <INPUT id=__VIEWSTATE
type=hidden
value=/wEPDwULLTE2ODE2NTY0OTIPZBYCZg9kFgICAw9kFgQCCQ9kFgQCAw8PFgIeBFRleHQFBuaVtOeQhmRkAg0PDxYCHgdWaXNpYmxlaGRkAgsPDxYCHwAFA+eLvGRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBSFjdGwwMCRNYWluJENvbW1lbnRzRm9ybTEkY2JSZW1iZXI0XS7QvyB7I2spS4d5HD98y9gN7A==
name=__VIEWSTATE> </DIV>
<SCRIPT type=text/javascript>
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</SCRIPT>
<SCRIPT src="javascript操作table对象的方法.files/WebResource.axd"
type=text/javascript></SCRIPT>
<SCRIPT src="javascript操作table对象的方法.files/ScriptResource.axd"
type=text/javascript></SCRIPT>
<SCRIPT src="F:\编程技术\JAVA技术\javascript操作table对象的方法.files\ScriptResource(1).axd"
type=text/javascript></SCRIPT>
<SCRIPT src="F:\编程技术\JAVA技术\javascript操作table对象的方法.files\ScriptResource(2).axd"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</SCRIPT>
<DIV class=header>
<H1><SPAN class=siteName id=ctl00_siteName>狼</SPAN></H1>
<H2><SPAN class=siteDescription id=ctl00_siteDescription><A
href="http://wolf.iispace.cn/">wolf.iispace.cn</A></SPAN> </H2>
<DIV class=nav><A href="http://wolf.iispace.cn/">首页</A> | <A
href="http://wolf.iispace.cn/gu/1/default.aspx">狼顾</A> | <A
href="http://wolf.iispace.cn/photo/1/default.aspx">相册</A> | <A
href="http://wolf.iispace.cn/ContactMe.aspx">留言</A> | <A
href="http://wolf.iispace.cn/Login.aspx">登录</A> </DIV></DIV>
<DIV id=ShowBlog>
<DIV align=center>
<H3><SPAN id=ctl00_Main_title>javascript操作Table对象的方法</SPAN></H3>来源:<SPAN
id=ctl00_Main_source>整理</SPAN> 发表时间：<SPAN id=ctl00_Main_dateCreated>2007-03-21
15:24:44</SPAN> 查看：<SPAN id=ctl00_Main_views>647</SPAN> 评论：<A
id=ctl00_Main_comments
href="http://wolf.iispace.cn/ShowBlog/gu/xin/jtable.aspx#commentForm">0</A>
</DIV><BR><SPAN class=size14 id=ctl00_Main_body>
<P>什么也不用说，直接看代码。</P>
<P><FONT style="BACKGROUND-COLOR: #deb887"></FONT>
<SCRIPT language=JavaScript>
pos.innerText=intRowIndex + 1;
var intRowIndex = 0;
function insertRow(tbIndex){
//插入行方法
var objRow = myTable.insertRow(tbIndex);
var objCel = objRow.insertCell(0);
objCel.innerText = document.myCell1.value;
var objCel = objRow.insertCell(1);
objCel.innerText = document.myCell2.value;
objRow.attachEvent("onclick", getIndex);
setstyle();
objRow.style.background = "yellow";
}
function deleteRow(tbIndex){
//删除行方法
myTable.deleteRow(tbIndex);
}
function getIndex(){
//当单击某一行时获取该行行号
intRowIndex = event.srcElement.parentElement.rowIndex;
pos.innerText = intRowIndex + 1;
}
function setstyle(){
//设置行颜色以及序号
for(var i=0; i< myTable.rows.length; i++)
{
var objRow = myTable.rows(i);
if(i%2 == 1)
{
objRow.style.background = "pink";
}
else
{
objRow.style.background = "";
}
}
}
</SCRIPT>
当前位置 : <SPAN id=pos></SPAN>
<TABLE id=myTable border=1>
<TBODY>
<TR onclick=getIndex()>
<TD>第一行测试</TD>
<TD>第一行第二列测试</TD></TR>
<TR onclick=getIndex()>
<TD>第二行测试内容</TD>
<TD>第二行第二列测试内容</TD></TR></TBODY></TABLE>
<P>第一栏 : <INPUT value=ASP name=myCell1><BR>第二栏 : <INPUT value=DOTNET
name=myCell2><BR><INPUT onclick=insertRow(intRowIndex) type=button value=插入行> <INPUT onclick=deleteRow(intRowIndex) type=button value=删除行> <INPUT onclick=insertRow(myTable.rows.length); type=button value=添加行></P>
<P><FONT style="BACKGROUND-COLOR: #d3d3d3"><html>
<BR><head>
<BR><title>javascript操作Table对象的方法</title> <BR>
<script language="JavaScript"> <BR>
var intRowIndex = 0; <BR>
function
insertRow(tbIndex){<BR> //插入行方法<BR>
var objRow =
myTable.insertRow(tbIndex);
<BR> var
objCel1 = objRow.insertCell(0);
<BR> objCel1.innerText
= document.myForm.myCell1.value;
<BR> var
objCel2 = objRow.insertCell(1);
<BR> objCel2.innerText
= document.myForm.myCell2.value;
<BR>
objRow.attachEvent("onclick", getIndex);
<BR> setstyle();<BR>
objRow.style.background = "yellow";
<BR> } <BR> function
deleteRow(tbIndex){ <BR> //删除行方法
<BR>
myTable.deleteRow(tbIndex); <BR> } <BR>
function getIndex(){
<BR> //当单击某一行时获取该行行号<BR>
intRowIndex =
event.srcElement.parentElement.rowIndex;
<BR> pos.innerText
= intRowIndex + 1; <BR> }<BR>
<BR> function setstyle(){ <BR> //设置行颜色以及序号
<BR> for(var i=0; i<
myTable.rows.length; i++)<BR> {<BR> var
objRow = myTable.rows(i);<BR> if(i%2 ==
1)<BR> {</FONT></P>
<P><FONT
style="BACKGROUND-COLOR: #d3d3d3"> objRow.style.background
= "pink";
<BR> }<BR> else<BR> {<BR> objRow.style.background
= ""; <BR> }<BR> } <BR>
}<BR> </script> <BR></head>
<BR><body onload="pos.innerText=intRowIndex + 1;">
<BR><h2>Table对象的方法</h2> <BR><hr>当前位置
: <span id="pos"></span>
<BR><table id="myTable" border=1>
<BR> <tr
onclick="getIndex()"><td>第一行测试</td><td>第一行第二列测试</td></tr>
<BR> <tr
onclick="getIndex()"><td>第二行测试内容</td><td>第二行第二列测试内容</td></tr>
<BR></table> <BR><form
name="myForm"> <BR> 第一栏 :
<input type="text" name="myCell1"
value="ASP"><br> <BR> 第二栏 :
<input type="text" name="myCell2"
value="NET"><br> <BR> <input
type="button" onclick="insertRow(intRowIndex)"
value="插入行"> <BR> <input
type="button" onclick="deleteRow(intRowIndex)"
value="删除行"> <BR> <input
type="button" onclick="insertRow(myTable.rows.length);"
value="添加行"> <BR></form>
<BR></body> <BR></html> </FONT></P></SPAN><BR><BR>
<HR>
<A name=commentForm></A>
<DIV align=left>
<TABLE class=size14 id=ctl00_Main_CommentsForm1_dgList
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 100%; BORDER-BOTTOM: 0px"
cellSpacing=2 cellPadding=3 rules=all border=0>
<TBODY></TBODY></TABLE><BR>
<TABLE cellSpacing=1 cellPadding=1 border=0>
<TBODY>
<TR>
<TD width=75>姓名：</TD>
<TD align=left><INPUT id=ctl00_Main_CommentsForm1_txtNickName
style="WIDTH: 400px" name=ctl00$Main$CommentsForm1$txtNickName> <SPAN
id=ctl00_Main_CommentsForm1_RequiredFieldValidator1
style="VISIBILITY: hidden; COLOR: red">＊</SPAN></TD></TR>
<TR>
<TD width=75>邮件：</TD>
<TD align=left><INPUT id=ctl00_Main_CommentsForm1_txtEmail
style="WIDTH: 250px"
name=ctl00$Main$CommentsForm1$txtEmail>不在页面显示,作者回复后将通过邮件通知您</TD></TR>
<TR>
<TD width=75>网站：</TD>
<TD align=left><INPUT id=ctl00_Main_CommentsForm1_txtBlogUrl
style="WIDTH: 400px" name=ctl00$Main$CommentsForm1$txtBlogUrl></TD></TR>
<TR>
<TD>内容： </TD>
<TD align=left><TEXTAREA id=ctl00_Main_CommentsForm1_txtContent style="WIDTH: 400px; HEIGHT: 80px" name=ctl00$Main$CommentsForm1$txtContent></TEXTAREA>
<SPAN id=ctl00_Main_CommentsForm1_RequiredFieldValidator3
style="VISIBILITY: hidden; COLOR: red">＊</SPAN></TD></TR>
<TR>
<TD></TD>
<TD><INPUT id=ctl00_Main_CommentsForm1_btnSave onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$Main$CommentsForm1$btnSave", "", true, "", "", false, false))' type=submit value=提交 name=ctl00$Main$CommentsForm1$btnSave>
<INPUT id=ctl00_Main_CommentsForm1_cbRember type=checkbox
name=ctl00$Main$CommentsForm1$cbRember><LABEL
for=ctl00_Main_CommentsForm1_cbRember>记住我</LABEL>
</TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=footerbg>
<DIV class=footer><BR>Copyright © 2006-2008 <SPAN
id=ctl00_siteNameCopyright>狼</SPAN>.<BR><A href="http://www.iispace.cn/"
target=__blank><B>Power by iispace.cn.</B></A> </DIV></DIV>
<SCRIPT type=text/javascript>
//<![CDATA[
var Page_Validators = new Array(document.getElementById("ctl00_Main_CommentsForm1_RequiredFieldValidator1"), document.getElementById("ctl00_Main_CommentsForm1_RequiredFieldValidator3"));
//]]>
</SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
var ctl00_Main_CommentsForm1_RequiredFieldValidator1 = document.all ? document.all["ctl00_Main_CommentsForm1_RequiredFieldValidator1"] : document.getElementById("ctl00_Main_CommentsForm1_RequiredFieldValidator1");
ctl00_Main_CommentsForm1_RequiredFieldValidator1.controltovalidate = "ctl00_Main_CommentsForm1_txtNickName";
ctl00_Main_CommentsForm1_RequiredFieldValidator1.errormessage = "＊";
ctl00_Main_CommentsForm1_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_Main_CommentsForm1_RequiredFieldValidator1.initialvalue = "";
var ctl00_Main_CommentsForm1_RequiredFieldValidator3 = document.all ? document.all["ctl00_Main_CommentsForm1_RequiredFieldValidator3"] : document.getElementById("ctl00_Main_CommentsForm1_RequiredFieldValidator3");
ctl00_Main_CommentsForm1_RequiredFieldValidator3.controltovalidate = "ctl00_Main_CommentsForm1_txtContent";
ctl00_Main_CommentsForm1_RequiredFieldValidator3.errormessage = "＊";
ctl00_Main_CommentsForm1_RequiredFieldValidator3.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_Main_CommentsForm1_RequiredFieldValidator3.initialvalue = "";
//]]>
</SCRIPT>
<DIV><INPUT id=__EVENTVALIDATION type=hidden
value=/wEWBwL8naTsDgKh/pqWCwLUo7+kBALH3p6VAwKBtqeZAwK53+adCgLB97yAAQHyrWDXr/RtyzM4BwMIKVnDR6qw
name=__EVENTVALIDATION> </DIV>
<SCRIPT type=text/javascript>
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
// -->
</SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
Sys.Application.initialize();
document.getElementById('ctl00_Main_CommentsForm1_RequiredFieldValidator1').dispose = function() {
Array.remove(Page_Validators, document.getElementById('ctl00_Main_CommentsForm1_RequiredFieldValidator1'));
}
document.getElementById('ctl00_Main_CommentsForm1_RequiredFieldValidator3').dispose = function() {
Array.remove(Page_Validators, document.getElementById('ctl00_Main_CommentsForm1_RequiredFieldValidator3'));
}
//]]>
</SCRIPT>
</FORM></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -