jQuery隔行變色效果程式碼例項

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它實現了table表格行隔行變色效果。

並且當選中當前行的時候也能夠實現變色。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style media="screen">
thead th {
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 2px 3px;
}
td {
  width: 80px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 2px 3px;
}
.odd {
  background: #FFFFEE;
}
.even {
  background: #FFF38F;
}
.selected {
  background: #FF6500;
  color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function($) {
  $.fn.extend({
    "alterBgcolor": function(options) {
      options = $.extend({
        odd: "odd",
        even: "even",
        selected: "selected"
      }, options);
      $("tbody>tr:odd", this).addClass(options.odd);
      $("tbody>tr:even", this).addClass(options.even);
      $("tbody>tr", this).click(function() {
        var hasSelected = $(this).hasClass(options.selected);
        $(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
          .find(":checkbox").attr("checked", !hasSelected);
      });
      $('tbody>tr:has(":checked")', this).addClass(options.selected);
      return this;
    }
  });
})(jQuery);
 
$(function() {
  $("#table_02").alterBgcolor()
    .find("th")
    .css("color", "red");
});
</script>
</head>
<body>
  <table id="table_01">
    <thead>
      <tr>
        <th>名稱</th>
        <th>年齡</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>螞蟻部落</td>
        <td>4</td>
        <td>青島市南區</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>網易</td>
        <td>10</td>
        <td>北京</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>騰訊</td>
        <td>12</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>百度</td>
        <td>15</td>
        <td>背景</td>
      </tr>
    </tbody>
  </table>
  <table id="table_02">
    <thead>
      <tr>
        <th>名稱</th>
        <th>年齡</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>螞蟻部落</td>
        <td>4</td>
        <td>青島市南區</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>網易</td>
        <td>10</td>
        <td>北京</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>騰訊</td>
        <td>12</td>
        <td>深圳</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>百度</td>
        <td>15</td>
        <td>背景</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.(function($) {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$.fn.extend({}）,為jquery例項物件新增屬性或者方法。

（3）."alterBgcolor": function(options) {},此函式實現了隔行變色效果,引數是一個配置物件。

（4）.options = $.extend({  odd: "odd",

  even: "even",

  selected: "selected"

}, options)，對options進行配置，extend的第一個引數是預設配置。

（5）.$("tbody>tr: odd", this).addClass(options.odd)，為當前jquery物件內的奇數tr行新增指定的樣式類。

（6）.$("tbody>tr:even", this).addClass(options.even)，和上面是同樣的道理，只是為偶數行新增指定的樣式類。

（7）.$("tbody>tr", this).click(function() {}）,為當前jquery物件內的tr行註冊click事件處理函式。

（8）.var hasSelected = $(this).hasClass(options.selected),判斷當前行是否具有指定的樣式類，返回一個布林值。

（9）.$(this)[hasSelected ? "removeClass" : "addClass"](options.selected).find(":checkbox").attr("checked", !hasSelected);

上面的程式碼分段比較好理解，$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)根據hasSelected是true或者false，來呼叫jquery物件的removeClass()方法或者addClass()方法，傳遞的引數是options.selected，也就是說如果沒有指定的樣式類，那麼就新增對應的樣式類，如果有，則刪除對應的樣式類；find(":checkbox").attr("checked", !hasSelected)如果核取方塊已經選中，則取消選中，否則選中。

（10）.$('tbody>tr:has(":checked")', this).addClass(options.selected)，如果行具有選中的核取方塊，那麼就新增對應的樣式類。

（11）.$(function() {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（12）.$("#table_02").alterBgcolor().find("th").css("color", "red")，對第二個表格進行表格隔行變色設定，並且將標題設定為紅色。

相關文章