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

额由于没有使用类库，，可能有些地方写的比较啰嗦<!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>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
这个效果做不难,可以给加一些代码: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>现在是在这个基础上添加这个功能
后台代码贴错了，刚才那个是提交部分的代码
  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
用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属性，其他全部移除
只需要一段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>

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

解决方案 »

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