突出显示选定的表格单元格 C# 菜单答案

【问题标题】：Highlight selected table cell C# Menu突出显示选定的表格单元格 C# 菜单
【发布时间】：2015-12-08 07:44:22
【问题描述】：

我有一个从数据库填充的动态菜单。我在突出显示当前选定的菜单时遇到问题，我使用的是 ASP.net C#。请检查下面的代码。

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>

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);
  }
}

除了菜单 onclick 事件之外，一切都运行良好。当我单击菜单时，它的背景颜色可以成功更改，单击另一个菜单时，它的背景颜色也会发生变化，但之前选择的菜单没有清除

CSS

#clMenu {
    background-color:#EE3D43;
}

【问题讨论】：

标签： javascript c# jquery html css

【解决方案1】：

我会推荐使用 CSS 类附件而不是设置 DOM 元素的id；因为从逻辑上讲，每个 DOM 元素都必须有唯一的 id。但是单个 CSS 类可以分配给许多元素。

所以请看看下面的变化：

CSS：

.clMenu {
    background-color:#EE3D43;
}

Javascript 代码：

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

【讨论】：

我会试试你的建议。
我试过它不工作。 cs->clMenu.Attributes.Add("onclick", "highlight(this)"); js-> function highlight(domElem) { var previousElem = document.getElementsByClassName("clMenu"); previousElem.className.replace(/\bclMenu\b/, ''); //从之前点击的菜单中移除高亮类 clMenu.className += "clMenu"; //为当前点击的菜单添加高亮类 } css->.clMenu { background-color:#EE3D43; }
很抱歉@NKhan。我错过了小代码。您能否再尝试一次更新的function highlight...谢谢。
@NKhan - 你的页面上有 JQuery 吗？
@NKhan - 请立即查看。函数现在使用jQuery 类选择器

【解决方案2】：

如果这个类只用于这个锚点，那么试试这个

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

而不是用 id 做 css 尝试用 class:

.anchorColor {
    background-color:#EE3D43;
}

【讨论】：

得到错误：未捕获的类型错误：this.attr is not a function