jquery - 更改 TreeView 控件的渲染 html 以创建标签而不是跨度

Question

我在 ASP.NET 的 Web 表单中使用 TreeView 控件，呈现的 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>

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

我尝试在 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

Answer 1

您可以使用 jQuery 创建标签。下面的代码片段将在带有正确“for”的复选框之后创建一个新的 Label 元素，并隐藏跨度

<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