突出显示选定的表格单元格C＃菜单

Question

I have a dynamic Menu populating from database. I have issues in highlighting the currently selected Menu, I am using ASP.net C#. Please check the code below.

HTML

function highlight(clMenu) {
        clMenu.id = "clMenu";
    }

<form id="Form1" method="post" runat="server">
    <asp:Table ID="tblMenu" runat="server" Width="100%">
    </asp:Table>
</form>

C#

TableRow rwMenu = new TableRow();
ConnectionCls ConObj = new ConnectionCls();
string StrQuery = "select * from Menus where isenabled=1";
ConObj.GetSqlDataTable(ref Dt, StrQuery);
if (Dt.Rows.Count > 0)
{
  for (i = 0; i <= Dt.Rows.Count - 1; i++)
  {
    string Href = Dt.Rows[i]["url"].ToString();
    clMenu.Text = "<a Href=" + Href + ">" + Dt.Rows[i]["MenuName"] + "</a>";
    clMenu.Attributes.Add("onclick", "highlight(this)");
    rwMenu.Cells.Add(clMenu);
    tblMenu.Rows.Add(rwMenu);
  }
}

Everything is working perfectly except the menu onclick event. When i click on a Menu its background color i am able to change successfully, on clicking another menu its background color also changing but the previous selected menu its not clearing

CSS

#clMenu {
    background-color:#EE3D43;
}

Answer 1

I will recommend to go for CSS class attachment instead of setting DOM element's id ; because logically there has to be unique ids to each and every DOM element. But single CSS class can be assigned to many elements though.

So please have a look at below changes:

CSS:

.clMenu {
    background-color:#EE3D43;
}

Javascript code:

function highlight(domElem) {
    $(".clMenu").removeClass('clMenu'); //removing highlight class from previously clicked  menu
    $(domElem).addClass('clMenu'); //adding highlight class to currently clicked menu
}

---

Answer 2

If this class are used only for this anchors only then try this

function highlight(clMenu){ 
    $(this).attr('id').click(function () {
       $(document).find('.anchorColor').removeClass('anchorColor');
       var aId = $(this).attr('id');
       $(this).addClass('anchorColor');
    });
}

and instead of doing the css with id try with class:

.anchorColor {
    background-color:#EE3D43;
}