如何以编程方式将 CSS 类添加到 ASP.NET CheckBoxlist html 表格项答案

【问题标题】：How to programmatically add CSS class to ASP.NET CheckBoxlist html table items如何以编程方式将 CSS 类添加到 ASP.NET CheckBoxlist html 表格项
【发布时间】：2016-09-28 18:50:47
【问题描述】：

如何以编程方式（即动态）将 CSS 类添加到 ASP.NET CheckBoxlist html 表格元素。

例如，我希望下面的“table”、“tr”、“td”标签输出（从浏览器查看源代码）包含 CSS 样式。

<table id="CheckBoxList1" class="myCss1 myCss1row myCss1col myCss1table__checkbox--row">
<tr>
    <td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" >value="Item1" /><label for="CheckBoxList1_0">MyItem1</label></td>
</tr><tr>
    <td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" >value="Item2" /><label for="CheckBoxList1_1">MyItem2</label></td>
</tr><tr>
    <td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" >value="Item3" /><label for="CheckBoxList1_2">MyItem3</label></td>
</tr><tr>
    <td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" >value="Item4" /><label for="CheckBoxList1_3">MyItem4</label></td>
</tr>

-=========== 在浏览器视图源中查看时的期望输出 =================

<table id="CheckBoxList1" class="myCss1 myCss1row myCss1col myCss1table__checkbox--row">
<tr class="myCss1row">
<td class="myCss1col"><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="Item1" /><label for="CheckBoxList1_0">BitBucket</label></td>
</tr><tr class="myCss1row">
    <td class="myCss1col"><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="Item2" /><label for="CheckBoxList1_1">Confluence</label></td>
</tr><tr class="myCss1row">
    <td class="myCss1col"><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="Item3" /><label for="CheckBoxList1_2">FECRU</label></td>
</tr><tr class="myCss1row">
    <td class="myCss1col"><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" value="Item4" /><label for="CheckBoxList1_3">JIRA</label></td>
</tr>

--============================================== ==========================

下面是sn-p的代码：

<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="ToolName" DataValueField="ToolName" CssClass="myCss1 myCss1row myCss1col myCss1table__checkbox--row"">
</asp:CheckBoxList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" SelectCommand="SELECT [ToolName], [ToolCost], [PDate], [ToolURL], [ToolLink], [ToolUrl] FROM [ToolInfo]"></asp:SqlDataSource>

感谢您提前回复！

【问题讨论】：

你的目标是什么？您想为表格行和单元格设置样式吗？
能否提供asp:CheckBoxList>的ASP.NET代码？

标签： c# html css asp.net

【解决方案1】：

不，这是不可能的。 CheckBoxList 不会总是呈现一个表格，所以这被认为是一个实现细节，并且对开发人员是隐藏的。除非您想真正地 hacky 并创建一个从 CheckBoxList 继承的新控件。然后你就可以完全控制标记并且可以添加任何你想要的类。

但是，对于大多数用例来说，这绝对是矫枉过正。为什么不只使用 CSS 选择器将样式应用于您的行和单元格？

.myCss1table__checkbox--row tr {
    /* same stuff you would put in myCss1row */
}

.myCss1table__checkbox--row td {
    /* same stuff you would put in myCss1col */
}

或者，您可以使用 javascript 并在页面加载时分配这些类（下面使用 jQuery）：

$(function(){
    $(".myCss1table__checkbox--row tr").addClass("myCss1row");
    $(".myCss1table__checkbox--row td").addClass("myCss1col");
});

【讨论】：

【解决方案2】：

列表数据绑定后，您可以访问后面代码中CheckBoxList中的每个ListItem，并且可以操作每个项目的class属性。

这将不允许您将类应用于每个特定的 DOM 元素，而只能应用于顶级元素。为了将样式应用于子 DOM 元素，我建议使用 CSS 选择器：

.class-applied td {
    /* style definition */
}

【讨论】：