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

时间:2011-08-29 07:36:29

标签: javascript jquery jquery-selectors

我正在生成一个Dynamic表,根据用户输入可以有多个行数。当用户选择/单击任何行时,我想更改行的背景颜色。我的代码如下所示:(评论的部分是我制作的试用版,但它们不起作用)

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

    }

我的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;}

1 个答案:

答案 0 :(得分:0)

根据你的帖子,我想你想知道如何改变背景颜色。

如果你想要只挂一行,这里有一个想法来自我:

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

这种方式背后的想法是,确保从旧行中删除“altcol_blue”类。