DHTML动态增加行

最新推荐文章于 2022-11-15 19:54:20 发布

原创最新推荐文章于 2022-11-15 19:54:20 发布 · 938 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#function #generator #javascript #table #html #button

JavaScript/DHTML 专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">

<meta name="ProgId" content="VisualStudio.HTML">

<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">

<script id="clientEventHandlersJS" language="javascript">

<!--

function CreateRows_onclick()

{ //动态增加行

//增加一行

var AppendRow = Orders.insertRow(Orders.rows.length);

var TotalRows = Orders.rows;

var Cells= AppendRow.cells;

//增加三列

var AppendCell1= TotalRows(AppendRow.rowIndex).insertCell(Cells.length);

var AppendCell2= TotalRows(AppendRow.rowIndex).insertCell(Cells.length);

var AppendCell3= TotalRows(AppendRow.rowIndex).insertCell(Cells.length);

AppendCell1.innerHTML="<B>1</B>";

AppendCell2.innerHTML="<B>2</B>";

AppendCell3.innerHTML="<B>3</B>";

AppendRow.id=Orders.rows.length;

AppendCell1.id=(AppendRow.id)*10+1;

AppendCell2.id=(AppendRow.id)*10+2;

AppendCell3.id=(AppendRow.id)*10+3;

//为新建行注册onmouseover事件被触发时调用的函数

AppendRow.onmouseover = changeBackgroudColor;

AppendRow.onmouseout =changeOriginalColor;

}

function changeBackgroudColor()

{//鼠标进入该行时改变颜色

var id = event.srcElement.id;

var floatId = id/10;

var rownunber = Math.floor(floatId);

if (rownunber%2 == 1)

{ //单行时为红色

if(event.srcElement.tagName=="TD")

{

event.srcElement.parentElement.style.backgroundColor = "#ff3300";

}

else

{

event.srcElement.style.backgroundColor = "#ff3300";

}

}

else

{ //双数行时为兰色

if(event.srcElement.tagName=="TD")

{

event.srcElement.parentElement.style.backgroundColor = "#0033cc";

}

else

{

event.srcElement.style.backgroundColor = "#0033cc";

}

}

}

function changeOriginalColor()

{ //鼠标离开该行时恢复颜色

if(event.srcElement.tagName=="TD")

{

event.srcElement.parentElement.style.backgroundColor = "#ffcc00";

}

else

{

event.srcElement.style.backgroundColor ="#ffcc00";

}

}

//-->

</script>

</head>

<body>

<FONT face="宋体"><INPUT id="CreateRows" type="button" value="CreateRows" name="CreateRows" onclick="return CreateRows_onclick()">

<TABLE id="Orders" cellSpacing="1" cellPadding="1" width="300" border="1" bgcolor="#ffcc00">

<TR id="1" onmouseover="changeBackgroudColor()" onmouseout="changeOriginalColor()">

<TD id="11">aa</TD>

<TD id="12">bb</TD>

<TD id="13">cc</TD>

</TR>

</TABLE>

</FONT>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。