Home mail me! Syndicate this site using RSS

Archive for June, 2005


[老文章]设置一行颜色的效果

2005-06-17 @ 01:06:13 · Filed under Javascript

<html>
<head>
<script language="javascript">
<!--
/**
* 用于标记已点击的行
*
* @access public
* @var  integer
*/
var oldRowNum = null;
 
/**
* 改变行颜色
*
* 实现原理：点击一行后，则标记该行已点击过，这样触发over或out事件的时候就不设置颜色了。
*
* @access  public
* @param  object  [theObject] 产生事件的那一行的对象
* @param  integer  [theRowNum] 行数
* @param  string  [theAction] 事件名称，取值为：over, out, click
* @param  string  [theDefaultColor] 默认的颜色
* @param  string  [theNewColor] 要设置的颜色
* @return  void
*/
function changeRowColor(theObject, theRowNum, theAction, theDefaultColor, theNewColor) {
 var newColor = null;
 
 if (theAction == 'over') {
  // onMouseOver事件
  if (typeof(oldRowNum) == 'undefined' || oldRowNum != theRowNum) {
   newColor = theNewColor;
  }
 } else if (theAction == 'out') {
  // onMouseOut事件
  if (typeof(oldRowNum) == 'undefined' || oldRowNum != theRowNum) {
   newColor = theNewColor;
  }
 } else if (theAction == 'click') {
  // onClick事件
  newColor = theNewColor;
  // 获取color_table对象
  var theTable = document.getElementById('color_table');
  // 获取color_table对象的所有tr对象
  var theRows = theTable.getElementsByTagName('tr');
  // 循环清除color_table这个表格里的所有行的颜色
  for (var i = 0; i < theRows.length; i++) {
   theRows[i].style.backgroundColor = theDefaultColor;
  }
  if (typeof(oldRowNum) == 'undefined' || oldRowNum != theRowNum) {
   // 标记当前行
   oldRowNum = theRowNum;
  } else {
   // 清空标记
   oldRowNum = null;
  }
 }
 
 if (newColor) {
  theObject.style.backgroundColor = newColor;
 }
}
 
//-->
</script>
</head>
<body>
<table id="color_table" border="1" width="300">
<tr onmouseover="changeRowColor(this, 1, 'over', 'white', 'orange');" onmouseout="changeRowColor(this, 1, 'out', 'white', 'white');" onmousedown="changeRowColor(this, 1, 'click', 'white', 'red');">
 <td>aa</td>
 <td>bb</td>
</tr>
<tr onmouseover="changeRowColor(this, 2, 'over', 'white', 'orange');" onmouseout="changeRowColor(this, 2, 'out', 'white', 'white');" onmousedown="changeRowColor(this, 2, 'click', 'white', 'red');">
 <td>aa</td>
 <td>bb</td>
</tr>
</table>
</body>
</html>

Comments