javascript와 jquery는 표 줄의 글꼴과 배경색을 제어합니다

2519 단어 JavaScriptjquerycss
<script type="text/javascript">
    window.onload=function(){
        var table=document.getElementById("tb");
        var tboby=table[0];
        var trs=document.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.color="#3333ff";  //          
            }else{
                trs[i].style.background="#99ffff"; //         
            }
        }
    };
</script>
</head>
<body>
<table id="tb">
    <tbody>
        <tr><td>   </td><td>   </td></tr>
        <tr><td>   </td><td>   </td></tr>
        <tr><td>   </td><td>   </td></tr>
        <tr><td>   </td><td>   </td></tr>
        <tr><td>   </td><td>   </td></tr>
        <tr><td>   </td><td>   </td></tr>
    </tbody>
</table>
</body>
 
주: 줄의 배경색을 설정하면trs[i]를 이렇게 쓸 수 있습니다.style.backgroundColor ="#99ffff";//짝수 행의 배경색 설정하기
 
 
다음은 jquery가 같은 기능을 실현합니다.
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#tb tbody tr:even").css("color","#3333ff");
		$("#tb tbody tr:odd").css("background","#99ffff");
	});
</script>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>   </td><td>   </td></tr>
<tr><td>   </td><td>   </td></tr>
<tr><td>   </td><td>   </td></tr>
<tr><td>   </td><td>   </td></tr>
<tr><td>   </td><td>   </td></tr>
<tr><td>   </td><td>   </td></tr>
</tbody>
</table>
</body>

 :          
$("#tb tbody tr:odd").css("backgroundColor","#99ffff"); 


좋은 웹페이지 즐겨찾기