ASP.NET Repeater同列<th>与<td>属性绑定及数据列显示顺序异常求助

1. 修正Repeater结构解决列显示错乱问题 #

列顺序异常的核心原因是</table>标签位置错误，放在了<ItemTemplate>内部，会导致每渲染一行数据就闭合一次表格，直接破坏DOM结构。需要新增<FooterTemplate>专门放置表格闭合标签，修正后的Repeater代码如下：

<asp:Repeater ID="RepeatInformation" runat="server">  
    <HeaderTemplate>
        <table id="tbldata" border="1" cellspacing="0" rules="all">  
            <tr style= "background-color: #eee;">
                <th id="col_date" scope="col" style="width: 90px">Date</th>
                <th id="col_t1" scope="col">09:00</th>
                <th id="col_t2" scope="col">09:30</th>
                <th id="col_t3" scope="col">10:00</th>
                <th id="col_t4" scope="col">10:30</th>
                <th id="col_t5" scope="col">11:00</th>
                <th id="col_t6" scope="col">11:30</th>
                <th id="col_t7" scope="col">12:00</th>
                <th id="col_t8" scope="col">12:30</th>
                <th id="col_t9" scope="col">13:00</th>
                <th id="col_t10" scope="col">13:30</th>
                <th id="col_t11" scope="col">14:00</th>
                <th id="col_t12" scope="col">14:30</th>
                <th id="col_t13" scope="col">15:00</th>
                <th id="col_t14" scope="col">15:30</th>
                <th id="col_t15" scope="col">16:00</th>
                <th id="col_t16" scope="col">16:30</th>
                <th id="col_t17" scope="col">17:00</th>
                <th id="col_t18" scope="col">17:30</th>
                <th id="col_t19" scope="col">18:00</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>  
        <tr>  
            <td headers="col_date"><%# Eval("Date") %></td>
            <td headers="col_t1"><%# Eval("Time1") %></td>  
            <td headers="col_t2"><%# Eval("Time2") %></td>  
            <td headers="col_t3"><%# Eval("Time3") %></td> 
            <td headers="col_t4"><%# Eval("Time4") %></td> 
            <td headers="col_t5"><%# Eval("Time5") %></td> 
            <td headers="col_t6"><%# Eval("Time6") %></td> 
            <td headers="col_t7"><%# Eval("Time7") %></td> 
            <td headers="col_t8"><%# Eval("Time8") %></td> 
            <td headers="col_t9"><%# Eval("Time9") %></td> 
            <td headers="col_t10"><%# Eval("Time10") %></td> 
            <td headers="col_t11"><%# Eval("Time11") %></td> 
            <td headers="col_t12"><%# Eval("Time12") %></td> 
            <td headers="col_t13"><%# Eval("Time13") %></td>
            <td headers="col_t14"><%# Eval("Time14") %></td>
            <td headers="col_t15"><%# Eval("Time15") %></td>
            <td headers="col_t16"><%# Eval("Time16") %></td>
            <td headers="col_t17"><%# Eval("Time17") %></td>
            <td headers="col_t18"><%# Eval("Time18") %></td> 
            <td headers="col_t19"><%# Eval("Time19") %></td>
        </tr> 
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater> 

上述代码已经直接在服务端给<th>加了唯一id，给对应<td>加了headers属性完成关联，不需要额外前端脚本处理。

2. 前端脚本关联方案 #

如果你要保留前端脚本实现关联的逻辑，使用以下修正后的jQuery代码即可，原脚本错误地将表格id作为属性名操作：

<script>
$(function() {
    $("#tbldata th").each(function (index) {
        const colId = `col_${index}`;
        $(this).attr('id', colId);
        $("#tbldata tr td:nth-child(" + (index + 1) + ")").attr('headers', colId);
    });
});
</script>

注意该脚本需要放在表格DOM渲染完成的位置，或者加DOM加载完成的包裹逻辑。

内容的提问来源于stack exchange，提问作者user16741069