0

HTMLのテーブルがあり、テーブルで使用したいjquery関数がいくつかあります。しかし、2つの関数を挿入すると、機能しなくなります。これがコードです。

機能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;
}
  });

機能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';
    };
}
};

これが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>
4

2 に答える 2

2

window.onload useを使用する代わりに$(window).load(function(){...})。実際には、でオーバーライド window.onloadしていますFunction 2。

$(window).load(function(){

  ....// your code

});
于 2012-10-27T17:19:18.990 に答える
0

2番目のwindow.onloadfuncが最初のwindow.onload関数をオーバーライドしています。

また、jqueryを使用すると、次のように、さまざまな方法で簡単に呼び出すことができます。

<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>
于 2012-10-27T18:14:48.253 に答える