当前位置：首页 > 网站应用

js报表双击固定样式，用于对比

cjw1232年前 (2023-11-01)网站应用4520

在很多报表中，需要鼠标上下选择时显示对比颜色，在双击时显示固定的色表示选中状态。

<table style="width:80%" border=1 onmouseover="getrow(this)" onmouseout="backrow(this)" ondblclick="selectRow(this)">
<tr><td>1</td><td>1</td></tr>
<tr><td>3</td><td>1</td></tr>
<tr><td>5</td><td>1</td></tr>
<tr><td>7</td><td>1</td></tr>
<tr><td>9</td><td>1</td></tr>
<tr><td>11</td><td>1</td></tr>
</table> 

<script>
var selectLine=-1
function getrow(obj){
   if(event.srcElement.tagName=="TD"){
   curRow=event.srcElement.parentElement
   curRow.style.background="yellow"
   }
}//getrow
function backrow(obj){
	if(event.srcElement.tagName=="TD"){
		curRow=event.srcElement.parentElement
		if(curRow.rowIndex==selectLine){
		curRow.style.background="blue"
		}else{
		curRow.style.background="pink"
		}
	
	}
}//backrow
function selectRow(obj){
	if(event.srcElement.tagName=="TD"){
		curRow=event.srcElement.parentElement
		curRow.style.background="blue"
		selectLine=curRow.rowIndex
		//alert("这是第"+(curRow.rowIndex+1)+"行")
	}//if
console.log(selectLine)
}//selectRow
</script>