为解决在datagrid中的onMouseOver效果查找的javascript资料及最终结果

特殊情况：datagrid的每列class不一样，为实现鼠标划过行变色，由于每个td的样式掩盖了鼠标样式故需要特殊处理

查找到的相关资料
包含表格的文档的DOM结构分析
http://www.yesky.com/20011102/203270.shtml
JS应用DOM入门：简单文档DOM结构分析
http://www.yesky.com/20011102/203197.shtml
JS应用DOM入门：DOM的对象属性
http://www.yesky.com/20011012/200665.shtml
JS应用DOM入门：和DHTML对象模型的比较
http://www.yesky.com/20011011/200432.shtml

如何知道当前mouse点击的是table中的第几行，第几列，以及这个cell的内容

<tr>

</tr>

<tr>

<td>tt</td><td>fdfd</td><td>dfdfd</td>

</tr>

</table>

function x()

{

o = event.srcElement

if(o.tagName!="TD") return

alert(o.parentElement.rowIndex +""+o.cellIndex+":"+ "=" +o.innerText)

}

</script>

<tr>

</tr>

<tr>

<td>tt</td><td>fdfd</td><td>dfdfd</td>

</tr>

</table>

function findTD(o){

if (o.nodeName=="TR"||o.nodeName=="TABLE") return;

if(o.nodeName=="TD")

return (o);

else

return (o.parentElement);

}

function x()

{

o = findTD(event.srcElement)

alert(o.parentElement.rowIndex +o.cellIndex+":"+ "=" +o.innerText)

}

</script>

Book.
http://vip.5d.cn/friday/upload/SCRIPT56.chm

为表格单元格onmouseover,onmouseout,onclick事件绑定了函数，如何在应用了click时只触发onclick而不触发onmouseout
event.cancelBubble=true; //是阻止事件冒泡,比如说:

<span onclick="alert('parent')">
<span onclick="alert('meizz')">event.cancelBubble=false</span>
</span>
和
<span onclick="alert('parent')">
<span onclick="alert('meizz'); event.cancelBubble=true">event.cancelBubble=true</span>
</span>

在第2段代码里由于加了阻断, 所以第一层span没有响应点击事件

有两个单元格（tr），命名为tr_A和tr_B，初始的时候，tr_B的背景色为red，tr_A的背景色为white，要求实现如下效果：
1.当鼠标移动到tr_A时（onMouseOver）：tr_A的背景色变为balck；
2.当鼠标离开tr_A时（onMouseOut）：tr_A的背景色变为white；
3.当鼠标点击tr_A时（onClick）：tr_A的背景色变成red，而tr_B的背景色变成white；并且鼠标再次移动到tr_A时，背景色不变，直到tr_B被点击后才会再继续变色。

以上步骤要求能循环实现，请问如何编写js？谢谢各位！
---------------------------------------------------------------

这个还没有写完善，你可以加工一下。

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<!--

function test1(obj)

{

obj.bgColor="#000000";

}

function test2(obj)

{

obj.bgColor="#ffffff";

}

function test3(obj)

{

alert("aa");

obj.bgColor="#ff0000";

document.all.tr_b.bgColor="#ffffff"

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<table>

<td>aaaaaaaaaaaaaaa</td></tr>

<tr id="tr_b" style="cursor:hand"><td>bbbbbbbbbbbbbbbbbb</td></tr>

</table>

</BODY>

</HTML>

对于第三点，你可以设置一个全局变量做为标志。
以下可以做为参考

_______________________________________________________________________________

var flag=1

function Mover(go){if(flag==1) go.bgColor="#ebe9e0";}

function Mout2(come){if(flag==1) come.bgColor="#e9f4ff";}

</script>

< td id=tr_A bgColor="#e9f4ff" onmouseover="javascript:Mover(this)" onmouseout="Mout2(this)" onclick="this.bgColor='#FF0000';document.all.tr_B.bgColor='#ffffff';flag=0;">baisun</td>

< td id=tr_B bgColor="#e9f4ff" onmouseover="javascript:Mover(this)" onmouseout="Mout2(this)" onclick="javascript:flag=(flag==0)?1:0;">baisun</td>

在DATAGRID中

我想每条记录鼠标onmouseover得时候那个单元格变色

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

If e.Item.ItemIndex <> -1 Then

e.Item.Attributes.Add("onmouseover", "this.bgColor='#C1D2EE'")

If e.Item.ItemIndex Mod 2 = 0 Then

e.Item.Attributes.Add("bgcolor", "#FFFFFF")

e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').singleValue")

Else

e.Item.Attributes.Add("bgcolor", "oldlace")

e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').oldValue")

End If

Else

DataGrid1.Attributes.Add("oldValue", "oldlace")

DataGrid1.Attributes.Add("singleValue", "#FFFFFF")

End If

End Sub

最终结果：

//css文件

/*first line bgcolor & font color*/

.line1{

background-color: #F2F2F2;

}

/*second line bgcolor & font color*/

.line2{

background-color:#F7F7F7;

}

/*the line which was hover*/

.linehover{

background-color:#FFF9DD;

}

//js文件

function getN(className,colNum) { //v4.0

o = event.srcElement;

//if(o.tagName!="TD") return;

for(i=0;i<colNum;i++){

if(o.tagName=="TD")

{

o.parentElement.cells[i].className=className;

}

else

o.parentElement.parentElement.cells[i].className=className;

}

function recoverN(colNum) { //v4.0

var line; var x;

o = event.srcElement;

//alert(o.tagName);

if(o.tagName!="TD") return;

var str=/^[0-9]+$/g;

for(i=0;i<13;i++)

{

x=(i+1)/2;

if(str.test(x)==true)

{

o.parentElement.cells[i].className='line1';

}

else

{

o.parentElement.cells[i].className='line2';

}

</script>

</head>

上海航空</td>

>9 </td>

>9 </td>

3 <a class="tiplinkline">经济舱全价</a></td>

</select></td>

</tr>

</table>

posted on 2005-07-04 14:25 DONET之路阅读(385) 评论(0) 编辑收藏收藏至365Key 所属分类: web开发

posted on 2005-12-19 14:56 把我的欢乐带给你阅读(192) 评论(0) 收藏举报

刷新页面返回顶部

chiname

公告

为解决在datagrid中的onMouseOver效果查找的javascript资料及最终结果

为解决在datagrid中的onMouseOver效果查找的javascript资料及最终结果