修复了 Header ASP NET Gridview JQuery

Fixed Header for ASP NET Gridview JQuery

我一直在寻找使我的 gridview header 修复的方法我遇到了这个 JQuery 代码:

 $(document).ready(function () {
               // Code to copy the gridview header with style
               var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
                 //Code to remove all the rows but the first row which is header row
                 $(gridHeader).find("tr:gt(0)").remove();
                 $('#<%=GridView1.ClientID%> tr th').each(function (i) {
                // Here Set Width of each th from gridview to new table th 
                $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
            });
                 // Append Header to the div controlHead
                 $("#controlHead").append(gridHeader); // <-- HERE is WHEN IT DAMAGES OTHER JS FUNCTIONALITY 
                 // Set its position to be fixed
                $('#controlHead').css('position', 'fixed');
                 // Put it on top
                $('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);

它确实有效,但是当我将这个克隆的 header 附加到空的 div "gridHeader" 时,它会使我的其他 JS 函数出现故障 像这个负责高亮选中行的JS Function,就是找不到Gridview了

  // Method that will highlight row
    function gridviewManipulation() {
        // Get Gridview 
        var gridView = document.getElementById("<%= GridView1.ClientID %>");

        // Loop through the Gridview
        for (var i = 1; i < gridView.rows.length; i++) {
            // Get the radio button of each row in the gridview and see if its checked
            if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == true)
            {
                // Place the color for selection
                gridView.rows[i].style.background = '#9bc27e';

            }
            else if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == false && i % 2 == 0)
            {
                // If its even then place white color back
                gridView.rows[i].style.background = '#FFFFFF';
            }
            else 
            {
                // If its odd place the bluish back on
                gridView.rows[i].style.background = '#E3EAEB'; 
            }
        }
    }

有什么建议吗? 谢谢!!

我认为问题出在您使用元素的 ID 来识别它。

当你运行这一行:

var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);

您创建了具有相同 ID 的第二个 table 元素。对该 ID 的后续调用未按预期工作。

我会尝试以下操作来更改您创建的克隆 table 的 ID:

var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id', 'newID');