Append <th> with <td> using repeater in same column

November 24, 2021

I am rendering the data using repeater on web page, however the data isn’t displaying in the correct order.

<asp:Repeater ID="RepeatInformation" runat="server">  
        <HeaderTemplate>
<table id="tbldata" border="1" cellspacing="0" rules="all">  
        <tr style= "background-color: #eee;">
            <th scope="col" style="width: 90px">Date</th>
            <th scope="col">09:00</th>
            <th scope="col">09:30</th>
            <th scope="col">10:00</th>
            <th scope="col">10:30</th>
            <th scope="col">11:00</th>
            <th scope="col">11:30</th>
            <th scope="col">12:00</th>
            <th scope="col">12:30</th>
            <th scope="col">13:00</th>
            <th scope="col">13:30</th>
            <th scope="col">14:00</th>
            <th scope="col">14:30</th>
            <th scope="col">15:00</th>
            <th scope="col">15:30</th>
            <th scope="col">16:00</th>
            <th scope="col">16:30</th>
            <th scope="col">17:00</th>
            <th scope="col">17:30</th>
            <th scope="col">18:00</th>
        </tr>
            </HeaderTemplate>
        <ItemTemplate>  
            <tr>  
                <td><%# Eval("Date") %></td>
                <td><%# Eval("Time1") %></td>  
                <td><%# Eval("Time2") %></td>  
                <td><%# Eval("Time3") %></td> 
                <td><%# Eval("Time4") %></td> 
                <td><%# Eval("Time5") %></td> 
                <td><%# Eval("Time6") %></td> 
                <td><%# Eval("Time7") %></td> 
                <td><%# Eval("Time8") %></td> 
                <td><%# Eval("Time9") %></td> 
                <td><%# Eval("Time10") %></td> 
                <td><%# Eval("Time11") %></td> 
                <td><%# Eval("Time12") %></td> 
                <td><%# Eval("Time13") %></td>
                <td><%# Eval("Time14") %></td>
                <td><%# Eval("Time15") %></td>
                <td><%# Eval("Time16") %></td>
                <td><%# Eval("Time17") %></td>
                <td><%# Eval("Time18") %></td> 
                <td><%# Eval("Time19") %></td>
            </tr> 
                </table>
        </ItemTemplate>
</asp:Repeater>

I have been tried to do it using the below script which I take referenced from here.

<%--<script>
        $("#tbldata th").each(function (i, val) {
            var th = $(this);
            var selector = "td:nth-child(" + (i + 1) + ")";
            th.parent().siblings().find(selector).attr("#tbldata", th.attr("#tbldata"));
        });
    </script>--%>

Currently the data is showing like this

Someone please suggest me how can I show the data in correct order column wise.

>Solution :

Move the closing </table> tag from the <ItemTemplate> to the FooterTemplate:

<HeaderTemplate>
    <table>
    <tr>
        ...
    </tr>
</HeaderTemplate>
<ItemTemplate>
    <tr>
        ...
    </tr>
</ItemTemplate>
<FooterTemplate>
    </table>
</FooterTemplate>