2012-10-27 3 views
0

HTML 형식의 표가 있으며 테이블과 함께 사용하려는 일부 jquery 기능이 있습니다. 하지만 두 가지 기능을 삽입하면 작업이 중단됩니다. 여기에 코드가 있습니다.HTML에서 여러 자바 스크립트를로드하는 데 문제가 있습니다.

기능 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> 
+0

"그들은 작동이 중지"오류 메시지도 문제가 설명되지 않습니다. – PeeHaa

+0

실제로는 하나의'window.onload' 함수 만 가질 수 있습니다. 두 번째 함수는 첫 번째 함수를 덮어 씁니다. 'document.ready'를 사용해야합니까? – adeneo

답변

0

두 번째 window.onload func이 첫 번째를 재정의합니다.

또한, JQuery와 함께, 당신은 같은, 그것은 WAY 다른이 방법으로 쉽게 전화 :

<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

작동 중지 HTML에서 그것을 호출하거나 HTML로 위의 코드를 붙여 넣으시겠습니까? – user1770970

2

대신 window.onload 사용 $(window).load(function(){...})을 사용하고있다. 사실 Function 2에서 window.onload을 무시하고 있습니다.

$(window).load(function(){ 

    ....// your code 

}); 
+0

만약 내가 그 함수에 넣어 – user1770970

관련 문제