怎么实现 鼠标点击表格行背景变色，移开后点击另一行时另一行变色而前一行恢复原来的背景色

Sitrone 2013-11-07 08:43:51
在网上搜了很久，或许是js真心不懂的缘故吧，还是来csdn来求教各位大神
需要的效果就是下面这个里面的效果一样
http://www.51diaocha.com/w/1049300.htm

我的情况是，页面的代码是整个一个table，然后在后台控制循环加row填充到table里，目前就是想实现这个功能，如何用js来实现，希望代码精简点好。
...全文
3359 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
chenCodeing 2014-09-04
  • 打赏
  • 举报
 回复
我也是酱油哥.....
yyqq12276419 2013-11-12
  • 打赏
  • 举报
 回复
只需要一段JQuery代码： .ltrv { background-color:#FFFFFF; height:35px; } <tr class="ltrv" name="pokerCdkExchangeInfo"> <script type="text/javascript"> $(document).ready(function(){ $("tr[name=pokerCdkExchangeInfo]").each(function(i){ $(this).mouseout(function(){this.style.background='white';}).mouseover(function(){this.style.background='#EEEEFF';}); }) }) </script>
白天猫 2013-11-10
  • 打赏
  • 举报
 回复
我也是酱油哥。。。。。
Zemo 2013-11-10
  • 打赏
  • 举报
 回复
用jquery比较容易实现。 

.active{
 backgroundcolor:#ff0000;
}


var $ = require('jquery');  
$('table tr').click(function() {  
$('table tr').removeClass('active'); // 先将所有class="active"移除，
$(this).addClass('active');  //点击的那个tr添加class="active"
});
或者 

$(this).addClass('active').siblings().removeClass('active');  //给当前元素添加active属性，其他全部移除
a_519273266 2013-11-09
  • 打赏
  • 举报
 回复
abc酱油哥路过abc
Sitrone 2013-11-08
  • 打赏
  • 举报
 回复
引用 3 楼 hdhai9451 的回复:
这个效果做不难,可以给加一些代码: js文件是这样 
var DataTable = new Array();
var DataTableSelectedItem = new Array();
function OnMouseOver_DataRow(row) {
    if (!IsSelectedItem(row))
        row.style.backgroundColor = "#b0d2da";
}
function OnMouseOut_DataRow(row) {
    if (!IsSelectedItem(row))
        row.style.backgroundColor = "";
}
function OnSelected_DataRow(row) {
    AddTableToArray(row)
    row.style.backgroundColor = "#b0d2da";
}
function AddTableToArray(row) {
    for (var i = 0; i < DataTable.length; i++) {
        if (DataTable[i] == row.parentElement) {
            DataTableSelectedItem[i].style.backgroundColor = "";
            DataTableSelectedItem[i] = row;
            return i;
        }
    }
    DataTable[DataTable.length] = row.parentElement;
    DataTableSelectedItem[DataTableSelectedItem.length] = row;
    return DataTable.length - 1;
}
function IsSelectedItem(row) {
    for (var i = 0; i < DataTable.length; i++) {
        if (DataTable[i] == row.parentElement) {
            return DataTableSelectedItem[i]==row;
        }
    }
    return false;
}
function InitSelectedItem(tableID, rowIndex) {
    var table = document.getElementById(tableID);
    OnSelected_DataRow(table.rows[rowIndex])
}
function GetCurrentRow(eventSRC) {
    var p = eventSRC.parentNode;
    while (p.tagName != "TR" && p.tagName != "BODY") {
        p = eventSRC.parentNode;
    }
    if (p.tagName != "TR")
    return null;
}
前台是这样绑定的 
<asp:Repeater runat="server" ID="rep_MasterList">
    <ItemTemplate>
        <tr class="row" onclick="OnSelected_DataRow(this)" onmouseout="OnMouseOut_DataRow(this)"
            onmouseover="OnMouseOver_DataRow(this)">
            <td>
                <%#Eval("td1") %>
            </td>
            <td>
                <%#Eval("td2") %>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr class="altrow" onclick="OnSelected_DataRow(this)" onmouseout="OnMouseOut_DataRow(this)"
            onmouseover="OnMouseOver_DataRow(this)">
            <td>
                <%#Eval("td1") %>
            </td>
            <td>
                <%#Eval("td2") %>
            </td>
        </tr>
    </AlternatingItemTemplate>
</asp:Repeater>
后台代码贴错了，刚才那个是提交部分的代码 

  Dim Question_Item_ID As Integer
        Dim Question_Item_Type As Integer
        Dim Question_Item As New TableRow
        Dim i As Integer

        For i = 0 To ds01.Tables(0).Rows.Count - 1
            Dim j As Integer
            j = i + 1
            Question_Item_Type = ds01.Tables(0).Rows(i)("Question_Item_Type")

            Select Case Question_Item_Type

                Case 0                     'Question_Item_Type = 0 单选題

                    Question_Item_ID = ds01.Tables(0).Rows(i)("Question_Item_ID")
                    Dim Question_Item_cell As New TableCell

                    Question_Item_cell.Width = 700
                    Question_Item_cell.Text = j.ToString + "." + ds01.Tables(0).Rows(i)("Question_Item_Name") + "："
                    Question_Item_cell.Font.Size = 10
                    Question_Item_cell.ForeColor = ColorTranslator.FromHtml("#000000")
                    Question_Item_cell.HorizontalAlign = HorizontalAlign.Left
                    Question_Item_cell.Style.Add("padding-top", "0.5em")

                  
                    Question_Item.Cells.Add(Question_Item_cell)           'Question_Item为题目行

                    table1.Rows.Add(Question_Item)


                    Dim c11 As New TableCell
                    c11.Width = 700
                    Dim ds03 As DataSet
                    With New QuestionSystem
                        ds03 = .Question_GetNumInRow(Center_ID, Question_Item_ID)   '取得答案的个数
                    End With
                    Dim ds02 As DataSet
                    With New QuestionSystem
                        ds02 = .Question_GetQuestion_Option(Center_ID, Question_Item_ID) '取出所对应的答案
                    End With

                    Dim t1 As New RadioButtonList
                    t1.Font.Size = 9
                    Dim dt1 As New TableRow

                  
                    t1.ID = "t1" & Question_Item_ID.ToString
               

                    '答案被选中后，背景色改变
                    t1.Attributes.Add("onmouseover", "this.style.backgroundColor='#E0EEE0'")
                    t1.Attributes.Add("onmouseout", "this.style.backgroundColor='#e7f3ff'")

                  
                    t1.DataSource = ds02.Tables(0)
                    t1.DataValueField = "Option_Value_ID"
                    t1.DataTextField = "Option_Value_Name"
                    '设置生成答案的设置
                    t1.RepeatDirection = RepeatDirection.Horizontal

                    
                    t1.RepeatColumns = ds03.Tables(0).Rows(0).Item("NumInRow")

                    t1.Width = Unit.Pixel(600)
                    t1.DataBind()
                    t1.CssClass = "question_Option"
                    c11.Controls.Add(t1)
                    
                    c11.Style.Add("padding-bottom", "0.5em")
                    dt1.Cells.Add(c11)       'dt1为答案行

                    table1.Rows.Add(dt1)

                 

                    Question_Item = New TableRow
                    table1.Rows.Add(Question_Item)

                   


                    If ViewState("flag") = "2" Then
                        Dim da As DataSet
                        With New QuestionSystem
                            da = .Question_GetOption_Value_ID(ViewState("Record_ID"), Question_Item_ID)
                        End With


                        If da.Tables(0).Rows.Count <> 0 Then

                            If da.Tables(0).Rows(0).Item("Option_Value_ID").trim <> "" Then
                                Dim Group As Integer
                                Group = CInt(da.Tables(0).Rows(0).Item("Option_Value_ID"))
                                t1.SelectedValue = Group
                               
                                Question_Item_cell.ForeColor = Color.Red    '未填写的答案的题目颜色变红
                              
                            End If
                        End If
Sitrone 2013-11-08
  • 打赏
  • 举报
 回复
引用 3 楼 hdhai9451 的回复:
这个效果做不难,可以给加一些代码: js文件是这样 
var DataTable = new Array();
var DataTableSelectedItem = new Array();
function OnMouseOver_DataRow(row) {
    if (!IsSelectedItem(row))
        row.style.backgroundColor = "#b0d2da";
}
function OnMouseOut_DataRow(row) {
    if (!IsSelectedItem(row))
        row.style.backgroundColor = "";
}
function OnSelected_DataRow(row) {
    AddTableToArray(row)
    row.style.backgroundColor = "#b0d2da";
}
function AddTableToArray(row) {
    for (var i = 0; i < DataTable.length; i++) {
        if (DataTable[i] == row.parentElement) {
            DataTableSelectedItem[i].style.backgroundColor = "";
            DataTableSelectedItem[i] = row;
            return i;
        }
    }
    DataTable[DataTable.length] = row.parentElement;
    DataTableSelectedItem[DataTableSelectedItem.length] = row;
    return DataTable.length - 1;
}
function IsSelectedItem(row) {
    for (var i = 0; i < DataTable.length; i++) {
        if (DataTable[i] == row.parentElement) {
            return DataTableSelectedItem[i]==row;
        }
    }
    return false;
}
function InitSelectedItem(tableID, rowIndex) {
    var table = document.getElementById(tableID);
    OnSelected_DataRow(table.rows[rowIndex])
}
function GetCurrentRow(eventSRC) {
    var p = eventSRC.parentNode;
    while (p.tagName != "TR" && p.tagName != "BODY") {
        p = eventSRC.parentNode;
    }
    if (p.tagName != "TR")
    return null;
}
前台是这样绑定的 
<asp:Repeater runat="server" ID="rep_MasterList">
    <ItemTemplate>
        <tr class="row" onclick="OnSelected_DataRow(this)" onmouseout="OnMouseOut_DataRow(this)"
            onmouseover="OnMouseOver_DataRow(this)">
            <td>
                <%#Eval("td1") %>
            </td>
            <td>
                <%#Eval("td2") %>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr class="altrow" onclick="OnSelected_DataRow(this)" onmouseout="OnMouseOut_DataRow(this)"
            onmouseover="OnMouseOver_DataRow(this)">
            <td>
                <%#Eval("td1") %>
            </td>
            <td>
                <%#Eval("td2") %>
            </td>
        </tr>
    </AlternatingItemTemplate>
</asp:Repeater>
谢谢热心回复。 不好意思，我可能没有说清楚，我的意思是，后台代码部分我已经写好了，其中的一个部分如下： 

 For i = 0 To ds01.Tables(0).Rows.Count - 1
            Question_Item_Type = ds01.Tables(0).Rows(i)("Question_Item_Type")
            Select Case Question_Item_Type           '選擇問題的類型
                Case "0"  '單選題
                    'Dim Question_Item_ID As Integer
                    Question_Item_ID = ds01.Tables(0).Rows(i)("Question_Item_ID")
                    'Dim ds06 As DataSet
                    'With New QuestionSystem
                    '    ds06 = .Question_GetRiskfactor_ID(Question_ID, Question_Item_ID)
                    'End With
                    'Dim Riskfactor_ID As Integer

                    'Riskfactor_ID = ds06.Tables(0).Rows(0).Item("Riskfactor_ID")

                    Dim ds02 As DataSet
                    With New QuestionSystem    '取出对应题号的答案选项
                        ds02 = .Question_GetQuestion_Option(Center_ID, Question_Item_ID)
                    End With
                    ID = "t1" & Question_Item_ID.ToString
                    'Dim myControl As RadioButtonList
                    'myControl = CType(Me.FindControl(ID), RadioButtonList)
                    Dim myControl As RadioButtonList = FindControl(ID)   '单选按钮列表
                    'myControl()
                    'myControl.SelectedIndex.ToString()
                    Dim Option_Value_ID As String                  '对应题号四个答案的id值
                    Option_Value_ID = myControl.SelectedValue.ToString   '所选答案的ID值


                    If Option_Value_ID <> "" Then                       '判断有没有填写答案。不等于0即为有答案
                        Dim Option_Value_Name As String
                        Dim dt As New DataSet
                        With New QuestionSystem
                            dt = .Question_GetOption_Value_Name(Option_Value_ID, Center_ID)   '取出选择的答案
                        End With

                        Option_Value_Name = dt.Tables(0).Rows(0).Item("Option_Value_Name")    '選擇的答案

                        Dim Option_Value As Decimal
                        Dim dt01 As New DataSet
                        With New QuestionSystem
                            dt01 = .Question_Get_Option_Value(Option_Value_ID, Center_ID)  '所选答案所得的值（分）
                        End With
                        Option_Value = dt01.Tables(0).Rows(0).Item("Option_Value")          '賦值給


                        Dim ds04 As String
                        Dim ds05 As DataSet
                        Dim Record_ID As Integer
                        Record_ID = ViewState("Record_ID")
                        With New QuestionSystem                               '查看Question_Record_Data表中记录
                            ds05 = .Question_GetQuestion_Item_ID(Record_ID, Question_Item_ID)
                        End With
                        If ds05.Tables(0).Rows.Count <> 0 Then              '如果有记录，则flag=2,更新数据
                            ViewState("flag") = 2
                        Else
                            ViewState("flag") = 1                           '如果没有记录，则flag=1,插入数据
                        End If
                        With New QuestionSystem                 'flag=1 插入數據， flag=2 更新數據（用於修改）
                            ds04 = .Question_SaveOption_Value_Name(ViewState("flag"), Record_ID, Question_Item_ID, Option_Value_ID, Option_Value_Name)
                        End With
                        myControl.Enabled = False

                    Else                                   '未填写答案时，只在表中插入空的数据
                        ViewState("flag") = 1
                        Dim Option_Value_Name As String
                        Option_Value_Name = ""
                        Dim ds04 As String
                        Dim Record_ID As Integer
                        Record_ID = ViewState("Record_ID")
                        With New QuestionSystem            '没有更新数据，只有返回值‘2’
                            ds04 = .Question_SaveOption_Value_Name(ViewState("flag"), Record_ID, Question_Item_ID, Option_Value_ID, Option_Value_Name)
                        End With
                        'myControl.Style.Add("background-color", "blue")
                        'myControl.BackColor = Color.Blue
                        myControl.Enabled = True
                    End If
前台代码是这样的： 
 <div id="questionList">
            <asp:Table ID="table1" runat="server" Width="700px">
            </asp:Table>
        </div>
现在是在这个基础上添加这个功能
Andy__Huang 2013-11-07
  • 打赏
  • 举报
 回复
这个效果做不难,可以给加一些代码: js文件是这样 
var DataTable = new Array();
var DataTableSelectedItem = new Array();
function OnMouseOver_DataRow(row) {
    if (!IsSelectedItem(row))
        row.style.backgroundColor = "#b0d2da";
}
function OnMouseOut_DataRow(row) {
    if (!IsSelectedItem(row))
        row.style.backgroundColor = "";
}
function OnSelected_DataRow(row) {
    AddTableToArray(row)
    row.style.backgroundColor = "#b0d2da";
}
function AddTableToArray(row) {
    for (var i = 0; i < DataTable.length; i++) {
        if (DataTable[i] == row.parentElement) {
            DataTableSelectedItem[i].style.backgroundColor = "";
            DataTableSelectedItem[i] = row;
            return i;
        }
    }
    DataTable[DataTable.length] = row.parentElement;
    DataTableSelectedItem[DataTableSelectedItem.length] = row;
    return DataTable.length - 1;
}
function IsSelectedItem(row) {
    for (var i = 0; i < DataTable.length; i++) {
        if (DataTable[i] == row.parentElement) {
            return DataTableSelectedItem[i]==row;
        }
    }
    return false;
}
function InitSelectedItem(tableID, rowIndex) {
    var table = document.getElementById(tableID);
    OnSelected_DataRow(table.rows[rowIndex])
}
function GetCurrentRow(eventSRC) {
    var p = eventSRC.parentNode;
    while (p.tagName != "TR" && p.tagName != "BODY") {
        p = eventSRC.parentNode;
    }
    if (p.tagName != "TR")
    return null;
}
前台是这样绑定的 
<asp:Repeater runat="server" ID="rep_MasterList">
    <ItemTemplate>
        <tr class="row" onclick="OnSelected_DataRow(this)" onmouseout="OnMouseOut_DataRow(this)"
            onmouseover="OnMouseOver_DataRow(this)">
            <td>
                <%#Eval("td1") %>
            </td>
            <td>
                <%#Eval("td2") %>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr class="altrow" onclick="OnSelected_DataRow(this)" onmouseout="OnMouseOut_DataRow(this)"
            onmouseover="OnMouseOver_DataRow(this)">
            <td>
                <%#Eval("td1") %>
            </td>
            <td>
                <%#Eval("td2") %>
            </td>
        </tr>
    </AlternatingItemTemplate>
</asp:Repeater>
天际的海浪 2013-11-07
  • 打赏
  • 举报
 回复 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
.avb {
	background-color: #99ffff;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
var temptr = $();
$(function(){
	$("#tableid").on("click","tr",function(event){
		temptr.removeClass("avb");
		temptr = $(this);
		temptr.addClass("avb")
	});
});
</script>
</head>
<body>
<table id="tableid">
	<tr><td>111</td><td>222</td><td>333</td></tr>
	<tr><td>111</td><td>222</td><td>333</td></tr>
	<tr><td>111</td><td>222</td><td>333</td></tr>
	<tr><td>111</td><td>222</td><td>333</td></tr>
	<tr><td>111</td><td>222</td><td>333</td></tr>
	<tr><td>111</td><td>222</td><td>333</td></tr>
	<tr><td>111</td><td>222</td><td>333</td></tr>
</table>
</body>
</html>
小沈阳 2013-11-07
  • 打赏
  • 举报
 回复
额 由于没有使用类库，，可能有些地方写的比较啰嗦 <!doctype html> <html> <head> <style> table{ background:grey; } </style> <script> function addListen(){ var arrTrs = document.getElementsByTagName('tr'); for(var i=0;i<arrTrs.length;i++){ var ss = arrTrs[i] ; if(arrTrs[i].addEventListener){ arrTrs[i].addEventListener('click',setTable) }else{ arrTrs[i].attachEvent("onclick",setTable); } } } function setTable(evt){ var arrTrs = document.getElementsByTagName('tr'); for(var i=0;i<arrTrs.length;i++){ arrTrs[i].style.background='grey'; } evt.target.parentNode.style.background='red'; } </script> </head> <body onload='addListen()'> <table border=1 width='400px'> <tr><td>s1</td><td>s1</td></tr> <tr><td>s1</td><td>s1</td></tr> <tr><td>s1</td><td>s1</td></tr> <tr><td>s1</td><td>s1</td></tr> <tr><td>s1</td><td>s1</td></tr> <tr><td>s1</td><td>s1</td></tr> <tr><td>s1</td><td>s1</td></tr> </table> </body> </html>
《程序天下：JavaScript实例自学手册》光盘源码
10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景...
程序天下:JavaScript实例自学手册
10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景...
Java学习指南（Swing高级篇)
本篇的前一篇是Swing入门篇。 Swing系列教程分为两篇：(1) Swing入门篇 (2) Swing高级篇。 本篇内容至少包含： - 高级绘制技术，包含线型、渐变色、文本的精确绘制 - 不规则形状及图表的绘制 - 工作线程与界面线程的...
Java开发实战1200例(第1卷).(清华出版.李钟尉.陈丹丹).part3
实例014 使当前项目依赖另一个项目 21 1.3 界面设计器 22 实例015 安装界面设计器 22 实例016 设计Windows系统的运行对话框 界面 23 实例017 设计计算器程序界面 26 实例018 设计关于进销存管理系统的界面 27 第2章 ...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章