Home/ Questions/Q 8759101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T14:43:00+00:00

I have a table in HTML and I have some jquery functions which I

  • 0

I have a table in HTML and I have some jquery functions which I want to use with the table. But when I insert the two functions they stop working. Here is the code.

Function 1 

// When document is ready: this gets fired before body onload <img     src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)'     class='wp-smiley' /> 
window.onload = function () {
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function () {
    // When value of the input is not blank
    if ($(this).val() != "") {
        // Show only matching TR, hide rest of them
        $("#tfhover tbody>tr").hide();
        $("#tfhover td:contains-ci('" + $(this).val() + "')").parent("tr").show();
    }
    else {
        // When there is no input or clean again, show everything back
        $("#tfhover tbody>tr").show();
    }
});
};
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function (elem, i, match, array) {
    return (elem.textContent || elem.innerText || $(elem).text() ||     "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
  });

Function 2 

window.onload = function () {
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow = [];
for (var i = 1; i < tfrow; i++) {
    tbRow[i] = document.getElementById('tfhover').rows[i];
    tbRow[i].onmouseover = function () {
        this.style.backgroundColor = '#ffffff';
    };
    tbRow[i].onmouseout = function () {
        this.style.backgroundColor = '#d4e3e5';
    };
}
};

Here is the HTML 

<head runat="server">
<title></title>
 <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="hl.js"></script> 
<script type="text/javascript" src="f.js"></script>    
<script type="text/javascript">



</script>


<style type="text/css">
table.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color:    #729ea5;border-collapse: collapse; width:auto; overflow-x:auto;}
table.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}

table.tftable tr {background-color:#d4e3e5;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
    .auto-style1 {
        height: 32px;
    }
</style>
</head>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You second window.onload func is overriding the first.

    Also, with jquery, you call it WAY different make it way easier, something like :

    <head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(function() {
            // Write on keyup event of keyword input element
            $("#kwd_search").keyup(function () {
                // When value of the input is not blank
                if ($(this).val() != "") {
                    // Show only matching TR, hide rest of them
                    $("#tfhover tbody>tr").hide();
                    $("#tfhover td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                }
                else {
                    // When there is no input or clean again, show everything back
                    $("#tfhover tbody>tr").show();
                };
            });

            // jQuery expression for case-insensitive filter
            $.extend($.expr[":"], {
                    "contains-ci": function (elem, i, match, array) {
                        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
            });

            var tfrow = document.getElementById('tfhover').rows.length;
            var tbRow = [];
            for (var i = 1; i < tfrow; i++) {
                tbRow[i] = $("#tfhover")[0].rows[i];
                var row = $(tbRow[i]);
                row.hover(function(eIn) {
                    $(this).css({ "background-color": "#ffffff" });
                },
                function(eOut) {
                    $(this).css({ "background-color": "#d4e3e5" });
                });
            };
        })

    </script>
    • 0