javascript - Gridview Rows Items Misalignment to Header

Question

Please see image first

Misaligning of row items to header happens after keypress event in textbox for record searching takes place. It works using javascript using this code

var $KeyPressSearch = jQuery.noConflict();
function filter2(phrase, _id) {

    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);

    var ele;
    for (var r = 1; r < table.rows.length; r++) {
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i]) >= 0)
                displayStyle = '';
            else {
                displayStyle = 'none';
                break;
            }
        }
        table.rows[r].style.display = displayStyle;

    }

    var lblTotalDSRdata = $KeyPressSearch("#grd tr").length;
}

this only happens to gridviews with jquery injected codes used to fixate the header. to other gridviews that do not use, all works fine.

So to fix the gridview header I apply the tutorial from this link http://gridviewscroll.aspcity.idv.tw/ (Basic)

[![enter image description here][3]][3]

Answer 1

Waitting for answers