Change the rendered html for the treeview control to create a label instead of span

Question

I use a treeview control in my webform in ASP.NET and the rendered HTML is like this:

<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>

I want to replace this span with a label for = "id of checkbox" to apply styles on it.

I tried some search on jQuery to access these tags and use .html("") but this one replaces the text inside the span not the span itself.

I want the result to be

<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>

NOTE: I can't access these elements by id because every node in the tree has a unique id

score 0 · Answer 1 · answered Jul 20 '19 at 09:03

You can use jQuery to create a Label. The snippet below will create a new Label element after the CheckBox with the correct "for" and hides the 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>

Or create an ASP.NET adapter to generate customized html. But that is much more complex. See Change the css styling of a checkboxlist in table ASP.NET

Change the rendered html for the treeview control to create a label instead of span

1 Answers1