简体   繁体   English

更改动态表中给定行的背景颜色(onClick事件)

[英]Changing the background colour of a given row (onClick event) in a Dynamic table

I am generating a Dynamic table, which can have multiple number of rows based on user input. 我正在生成一个动态表,该表可以根据用户输入具有多个行。 I want to change the back ground color of the row, when user select / click on any of the rows. 当用户选择/单击任何行时,我想更改行的背景色。 My code looks like : (The commented part is the trial I made, but they are not working) 我的代码看起来像:(注释的部分是我进行的试用,但是它们不起作用)

function Contact_OnUpdateTelephone() {
    $('#tableTelephone > tbody > tr').remove();
    for (var c = 0; c < _updatedTelephoneList.length; c++) {
        var index = _updatedTelephoneList[c].Index;
        var id = _updatedTelephoneList[c].Id;

        $('#tableTelephone tbody:last').append("<tr onclick = GetTelephoneData(" + index + ",'" + id + "');><td>" + index + "</td><td>" + id + "</td></tr>");           
    }       
}



function GetTelephoneData (index, id) {

//Change the color of the clicked (selected) row

//       $("#tableTelephone tbody tr").removeClass("altcol_blue");
//       $(this).addClass("altcol_blue");

//       $("tr").click(function(){
//          $(this).addClass("altcol_blue").siblings("tr").removeClass("altcol_blue");
//       });

        $("#tableTelephone tr td").live( 'click', function () {
            $(this).addClass("altcol_blue").siblings("tr").removeClass("altcol_blue");
        });

Var SelectedIndex = index;
...
...

    }

My CSS looks like : 我的CSS看起来像:

table.resulttable tr.altcol_blue td{ height:20px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#444444; font-size:11px; background-color:#deedf5; vertical-align:middle;  padding-left:5px;}

According your post, I think you want to know how can you change the background color. 根据您的帖子,我想您想知道如何更改背景颜色。

In case you want highligting only one row Here an Idea from I: 如果您只想高行排行我这里的一个主意:

    $("#tableTelephone tr td").each(function () {
        if ($(this).parent().hasClass("altcol_blue") == false)
        {
          $("#tableTelephone tr").removeClass("altcol_blue");
          $(this).parent().addClass("altcol_blue");
        }
    });

The idea behind this way is, to make sure that the class 'altcol_blue' will be removed from the old row(s). 这种方法背后的想法是,确保从旧行中删除类“ altcol_blue”。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM