更改树视图控件的呈现 html 以创建标签而不是跨度答案

【问题标题】：Change the rendered html for the treeview control to create a label instead of span更改树视图控件的呈现 html 以创建标签而不是跨度
【发布时间】：2019-11-29 01:23:42
【问题描述】：

我在 ASP.NET 的 web 表单中使用了一个树视图控件，呈现的 HTML 是这样的：

<td class="SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_2" style="white-space:nowrap;">
   <input type="checkbox" name="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox">
   <span class="ctl00_ContentPlaceHolder1_FormView1_TreeView1_0 SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_1" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1t32" style="border-style:none;font-size:1em;">
       Admissions and Jobs
   </span>
</td>

我想用 = "id of checkbox" 的标签替换这个 span 以在其上应用样式。

我尝试在 jQuery 上进行一些搜索以访问这些标签并使用 .html("") 但这一个替换跨度内的文本而不是跨度本身。

我希望结果是

<td class="SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_2" style="white-space:nowrap;">
   <input type="checkbox" name="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox">
   <label for="ctl00_ContentPlaceHolder1_FormView1_TreeView1n32CheckBox" class="ctl00_ContentPlaceHolder1_FormView1_TreeView1_0 SingleCheckbox ctl00_ContentPlaceHolder1_FormView1_TreeView1_1" id="ctl00_ContentPlaceHolder1_FormView1_TreeView1t32" style="border-style:none;font-size:1em;">
       Admissions and Jobs
   </label>
</td>

注意：我无法通过 id 访问这些元素，因为树中的每个节点都有唯一的 id

【问题讨论】：

标签： jquery asp.net webforms treeview system.web.ui.webcontrols

【解决方案1】：

您可以使用 jQuery 创建标签。下面的 sn-p 将在 CheckBox 之后使用正确的“for”创建一个新的 Label 元素并隐藏 span

<script>
    $('#tableID input[type=checkbox]').each(function () {
        var span = $(this).next('span');
        var labelText = span.html();
        span.hide();
        $('<label for="' + $(this).prop('id') + '">' + labelText + '</label>').insertAfter($(this));
    });
</script>

或者创建一个 ASP.NET 适配器来生成自定义的 html。但这要复杂得多。见Change the css styling of a checkboxlist in table ASP.NET

【讨论】：