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 < _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).
精彩评论