jquery to replace th with td

Question

User-944424728 posted

Hello, how do I write a jquery replace <th> with <td> with id below? 

id="ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions

<th scope="col" wiid="C1014" style="display: block; text-align: left;"><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/th_col.png" class="wave5icon" tabindex="0" alt="STRUCTURAL ELEMENTS: Column header cell" style="border: none; vertical-align: bottom; cursor: pointer; max-width: 44px; max-height: 25px; z-index: 10000; display: none;" wiid="N1577"><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/th_empty.png" class="wave5icon" tabindex="0" alt="ERRORS: Empty table header" wiid="N1478" style="border: none; vertical-align: bottom; cursor: pointer; max-width: 44px; max-height: 25px; z-index: 10000; display: inline; opacity: 1;">&nbsp;</th>

--

<table cellspacing="0" headertext="application question" border="0" id="ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions" wiid="C1011" wave5style="border-collapse:collapse;" style="display: block; text-align: left;">
<tbody wiid="C1012" style="display: block; text-align: left;"><tr wiid="C1013" style="display: block; text-align: left;">
<th scope="col" wiid="C1014" style="display: block; text-align: left;"><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/th_col.png" class="wave5icon" tabindex="0" alt="STRUCTURAL ELEMENTS: Column header cell" style="border: none; vertical-align: bottom; cursor: pointer; max-width: 44px; max-height: 25px; z-index: 10000; display: none;" wiid="N1577"><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/th_empty.png" class="wave5icon" tabindex="0" alt="ERRORS: Empty table header" wiid="N1478" style="border: none; vertical-align: bottom; cursor: pointer; max-width: 44px; max-height: 25px; z-index: 10000; display: inline; opacity: 1;">&nbsp;</th>

--

will this work?

 var $span = $('#id="ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions'); $span.find('th').wrapInner('<td />').contents().unwrap(); $span.find('tbody').contents().unwrap();

or

$('#ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions th').replaceWith(function(){
    return $("<td />", {html: $(this).html()});
});

Answer 1

User-719153870 posted

Hi aspvbnetm,

It's right that you want to replace the label with the replaceWith() method. But part of the code is wrong.

Please refer to below codes:

Jquery:

<script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(
                function () {
                    $("th").each(function () {
                        $(this).replaceWith('<td id="ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions">' + $(this).html() + '</td>');
                    })
                    return false;
                });
        });
    </script>

ASPX:

<asp:Button ID="Button1" runat="server" Text="Change ThTag" />
            <table cellspacing="0" headertext="application question" border="0"
                id="ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions"
                wiid="C1011" wave5style="border-collapse:collapse;" style="display: block; text-align: left;">
                <thead>
                    <tr><th></th></tr>
                </thead>
                <tbody wiid="C1012" style="display: block; text-align: left;">
                    <tr wiid="C1013" style="display: block; text-align: left;">
                        <th scope="col" wiid="C1014" style="display: block; text-align: left;">
                            <img src="files/bgllogin.jpg" />
                            <img src="files/bgllogin.jpg" />
                            &nbsp;
                        </th>
                    </tr>
                </tbody>
            </table>

Here is the result of my work demo:

Best Regard,

Yang Shen

Answer 2

User-944424728 posted

Hello, I do not have button1 click.  I just want to replace the th hidden in the aspx code with td due to empty table header (th). Please advise. Thanks.

Answer 3

User-719153870 posted

Hi aspvbnet,

According to your description, if you want to replace < th > with < td > when loading a web page, please refer to the following code:

<script type="text/javascript">
        $(document).ready(function () {
                    $("th").each(function () {
                        $(this).replaceWith('<td id="ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions">' + $(this).html() + '</td>');
                    })
        });
    </script>

Compared with the previous code, the replacement method is no longer triggered by Button.Click(), but by the Document.Ready().

Best Regard,

Yang Shen