开发者

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

开发者 https://www.devze.com 2023-03-31 16:07 出处:网络
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 loo

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 < _updated开发者_运维知识库TelephoneList.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 :

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).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号