原生jsとjQueryを用いて表のインターレース変色を実現

14147 ワード

javascript jquery

原生jsは表の行を隔てて変色を実現する:原生jsを利用してDOM要素HTMLを操作する:


<html>
<head>
<title>1.                 title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/3.css" />

<script src="./js/jquery-3.1.0.min.js">script>
<style>.blue {background-color: #ccccff;}style>
head>
<body>
    <table id="data">
        <thead>
            <tr>
                <th>  th>
                <th>  th>
                <th>    th>
                <th>  th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>Tomtd>
                <td>$3500td>
                <td>2010-10-25td>
                <td><a href="javascript:void(0)" onclick="fun(this)">  a>td>
            tr>
            <tr>
                <td>Marytd>
                <td>$3400td>
                <td>2010-12-1td>
                <td><a href="javascript:void(0)" onclick="fun(this)">  a>td>
            tr>
            <tr>
                <td>Kingtd>
                <td>$5900td>
                <td>2009-08-17td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">  a>td>
            tr>
            <tr>
                <td>Scotttd>
                <td>$3800td>
                <td>2012-11-17td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">  a>td>
            tr>
            <tr>
                <td>Smithtd>
                <td>$3100td>
                <td>2014-01-27td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">  a>td>
            tr>
            <tr>
                <td>Allentd>
                <td>$3700td>
                <td>2011-12-05td>
                <td><a href="javascript:void(0)"  onclick="fun(this)">  a>td>
            tr>
        tbody>
    table>
body>
html>

CSSスタイル:

#data {
    width: 600px;
}

#data, td, th {
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
}

th, td {
    height: 28px;
}

#data thead {
    background-color: #333399;
    color: #ffffff;
}

原生js:

<script type="text/javascript">
    //  id         
    var table=document.getElementById("data");
    //             ，              tbody，           tbody         ，     tbody。
    var tbody=table.getElementsByTagName("tbody")[0];
    //   tbody     tr  
    var trs=tbody.getElementsByTagName("tr");
    //  for       tr
    for(var i=0;i//              ，      
        if(i%2==0){
            trs[i].className="blue";
        }else{
            trs[i].style.backgroundColor="red";
        }
    }
script>

jQueryを利用して行を隔てて変色を実現するのは簡単です(jQueryを使用する場合はjQueryファイルを導入しますよ!):

<script type="text/javascript">
    $("#data>tbody tr:even").css("background-color","red");
    $("#data>tbody tr:odd").css("background-color","blue");
script>

これが原生jsとjQueryライブラリの違いで、2行のコードで済むのですが、私のようなシロは、原生jsで書くことを多くして、練習することをお勧めします.jQueryの底は原生jsで書くので、原生の書くことは滑らかで、jQueryも簡単になります.

jquery hoverイベントはアニメーションを1回だけトリガーします

$(function(){})は何ですか.すなわち$(document).ready(function(){})、いつ実行しますか?