jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

时间：2021-05-13 08:46:54

　　　　好久没有写东西了，当然不是没东西可写，只是没有时间写。今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来，供自己或者别人查询使用。最近我在做一个新的 B/S 系统，由于没有专门的美工人员和前端人员，所以这个工作我就担当起来。后端的代码是我的本职工作，没有话说。前端的东西就比较麻烦了。我最开始工作之初也做过美工，由于本人有绘画的功底，但是后来就把主要的经历放在了服务端代码了，因为大部分公司都会有前端人员来完成相应的工作。

　　　　当前的公司在技术方面没有什么积累，所以，所有的代码都要通过自己的编写来实现，前端也不例外。光前端的工作，本来打算2天搞完，后来发现超时2天。现在我要做一套UI的界面，通过后端数据生成前端的 Html Table 的样式，这部分工作已经完成。这个界面需要实现以下要求：隔行变色，可以进行全选、反选，选择的行变换背景色，并且鼠标经过行也要进行变色，同时，如果有选择的行，必须获取 CheckBox 的值，以后可以进行一些列操作。好久没有写前端代码了，也生了不少，这个过程很麻烦，现在终于过来了。为了防止以后还有这部分的需要，所以今天就把代码记录下来，便于以后查询使用。（这些对于高手来说，很简单，我不是高手针对前端，希望高手不要拍砖！）

　　　　一、先上一张图片，大家来看看效果！
　　　　　　jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

　　　　二、有了以上图片，下面就直接贴代码了，先上 CSS 代码。

 table{width:100%;border-collapse:collapse;margin:1em 0;}

 table, td{font:100% Arial, Helvetica, sans-serif;font-size:13px;}

 th,td{padding:.5em;border:1px solid #fff;}

 th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;font-size:14px;font-weight:bold;}

 td{background:#e5f1f4;font-size:13px; cursor:pointer}

 tr.even td{background:#e5f1f4;}

 tr.odd td{background:#f8fbfc;}

 tr.highlight td{background:#ecfbd4;}

 tr.selected td{background:#bce774;color:#555;}

 td input[type=checkbox] { display:inherit;text-align:center;outline:none }

 td a.button{text-align:center;margin:0 5px; }

　　　　三、Html table 的代码

 <table id="myDataTable" cellspacing="0" cellpadding="0">

 <thead>

 <tr>

 <th width="75"><center><label><input type="checkbox" id="cbMulController" name="cbMulController"></label></center></th>

 <th width="10%">主键</th>

 <th width="10%">账号名</th>

 <th width="10%">开始日期</th>

 <th width="10%">结束日期</th>

 <th width="10%">登陆日期</th>

 <th width="10%">登陆次数</th>

 <th width="10%">启用</th>

 <th width="340"><center>管理</center></th>

 </tr>

 </thead>

 <tbody id="tdbody">

 <tr>

 <td><center><input id="cbMultiple_23" name="cbMultiple" type="checkbox" value="23"/></center></td>

 <td>23</td>

 <td>liulei123456</td>

 <td>2019-03-01 18:19:57</td>

 <td>2019-06-01 18:19:57</td>

 <td>2019-03-01 18:19:57</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/23" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/23'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/23" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_22" name="cbMultiple" type="checkbox" value="22"/></center></td>

 <td>22</td>

 <td>liulei12345678</td>

 <td>2019-02-27 17:43:55</td>

 <td>2019-05-27 17:43:55</td>

 <td>2019-02-27 17:43:55</td>

 <td>0</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/22" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/22'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/22" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_9" name="cbMultiple" type="checkbox" value="9"/></center></td>

 <td>9</td>

 <td>YangYanShun</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:19:57</td>

 <td>2019-01-18 14:19:57</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/9" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/9'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/9" class="button button-raised button-royal button-small">修改</a></center>

 </td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_8" name="cbMultiple" type="checkbox" value="8"/></center></td>

 <td>8</td>

 <td>YangYanSi</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:19:43</td>

 <td>2019-01-18 14:19:43</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/8" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/8'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/8" class="button button-raised button-royal button-small">修改</a></center>

 </td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_7" name="cbMultiple" type="checkbox" value="7"/></center></td>

 <td>7</td>

 <td>YangYanZhao</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:19:26</td>

 <td>2019-01-18 14:19:26</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/7" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/7'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/7" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_6" name="cbMultiple" type="checkbox" value="6"/></center></td>

 <td>6</td>

 <td>YangYanDe</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:18:59</td>

 <td>2019-01-18 14:18:59</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/6" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/6'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/6" class="button button-raised button-royal button-small">修改</a></center>

 </td>

 </tr>

 <tr><td><center><input id="cbMultiple_5" name="cbMultiple" type="checkbox" value="5"/></center></td>

 <td>5</td>

 <td>YangYanHui</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:18:08</td>

 <td>2019-01-18 14:18:08</td>

 <td>1</td>

 <td>True</td>

 <td>

 <center>

 <a href="/Backstage/AccountManage/View/5" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/5'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/5" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_4" name="cbMultiple" type="checkbox" value="4"/></center></td>

 <td>4</td>

 <td>YangYanGuang</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:10:33</td>

 <td>2019-01-18 14:10:33</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/4" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/4'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/4" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr><td><center><input id="cbMultiple_3" name="cbMultiple" type="checkbox" value="3"/></center></td>

 <td>3</td>

 <td>YangYanDing</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:10:12</td>

 <td>2019-01-18 14:10:12</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/3" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/3'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/3" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr><td><center><input id="cbMultiple_2" name="cbMultiple" type="checkbox" value="2"/></center></td>

 <td>2</td>

 <td>YangYanPing</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-02-18 14:09:30</td>

 <td>2019-01-18 14:09:30</td>

 <td>1</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/2" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/2'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/2" class="button button-raised button-royal button-small">修改</a></center></td>

 </tr>

 <tr>

 <td><center><input id="cbMultiple_1" name="cbMultiple" type="checkbox" value="1"/></center></td>

 <td>1</td>

 <td>Administrator123</td>

 <td>2019-01-18 14:08:13</td>

 <td>2019-05-05 14:42:35</td>

 <td>2019-03-06 14:42:35</td>

 <td>202</td>

 <td>True</td>

 <td><center>

 <a href="/Backstage/AccountManage/View/1" class="button button-raised button-primary button-small">查看</a>

 <a href="javascript:if(confirm('确实要删除吗?'))location='/Backstage/AccountManage/Delete/1'" class="button button-raised button-caution button-small">删除</a>

 <a href="/Backstage/AccountManage/Modify/1" class="button button-raised button-royal button-small">修改</a></center>

 </td>

 </tr></tbody></table>

　　　　四、以下就是最主要的代码了，JavaScript 代码，该代码依赖 JQuery，使用之前请先引入。

　　　　

 $(document).ready(function () {

     // 例子1:

     //-隔行,滑动,点击 变色

     $('.cssraindemo1 tbody tr:even').addClass('odd');

     $('.cssraindemo1 tbody tr').hover(

          function () { $(this).addClass('highlight'); },

          function () { $(this).removeClass('highlight'); }

         );

     $('.cssraindemo1 tbody tr').click(

          function () { $(this).toggleClass('selected'); }

         );

     //例子2：可以选择 checkbox 或者点击行控制行的颜色和 checkbox 是否是选中状态:

     $('#myDataTable tbody tr:even').addClass('odd');

     $('#myDataTable tbody tr').hover(

          function () { $(this).addClass('highlight'); },

          function () { $(this).removeClass('highlight'); }

         );

     // 如果复选框默认情况下是选择的，变色.

     $('#myDataTable input[type="checkbox"]:checked').parents('tr').addClass('selected');

     // 复选框

     $('#myDataTable tbody tr').find("td:first").click(

          function () {

              if ($(this).parents('tr').hasClass('selected')) {

                  $(this).parents('tr').removeClass('selected');

                  $(this).find('input[type="checkbox"]').removeAttr('checked');

                  //自己增加的代码，获取选择 CheckBox 的值

                  var replaceValue = $(this).find('input[type="checkbox"]').val();

                  $("input[type=text]", document.forms[0]).each(function () {

                      if (this.name == "txtDataKeys") {

                          if (document.getElementById(this.name).value.length != 0) {

                              if (document.getElementById(this.name).value.indexOf("," + replaceValue) != -1) {

                                  document.getElementById(this.name).value = document.getElementById(this.name).value.replace("," + replaceValue, "");

                              }

                              else if (document.getElementById(this.name).value.indexOf(replaceValue + ",") != -1) {

                                  document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue + ",", "");

                              }

                              else {

                                  document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue, "");

                              }

                          }

                      }

                  });

              } else {

                  $(this).parents('tr').addClass('selected');

                  $(this).find('input[type="checkbox"]').attr('checked', 'checked');

                  //自己增加的代码，获取选择 CheckBox 的值

                  var replaceValue = $(this).find('input[type="checkbox"]').val();

                  $("input[type=text]", document.forms[0]).each(function () {

                      if (this.name == "txtDataKeys") {

                          if (document.getElementById(this.name).value == "") {

                              document.getElementById(this.name).value = replaceValue;

                          }

                          else {

                              document.getElementById(this.name).value += "," + replaceValue;

                          }

                      }

                  });

              }

          }

         );

     //例子3：选择 checkbox 控制行的颜色

     $('#myDataTable tbody tr:even').addClass('odd');

     $('#myDataTable tbody tr').hover(

      function () { $(this).addClass('highlight'); },

      function () { $(this).removeClass('highlight'); }

     );

     //如果复选框默认情况下是选择的，变色.

     $('#myDataTable tbody input[type="checkbox"]:checked').parents('tr').addClass('selected');

     //复选框

     $('#myDataTable tbody input[type="checkbox"]').change(function () {

         if ($(this).is(':checked') == false) {

             $(this).parents('tr').removeClass('selected');

             //自己增加的代码，获取选择 CheckBox 的值

             var replaceValue = $(this).val();

             $("input[type=text]", document.forms[1]).each(function () {

                 if (this.name == "txtDataKeys") {

                     if (document.getElementById(this.name).value.length != 0) {

                         if (document.getElementById(this.name).value.indexOf("," + replaceValue) != -1) {

                             document.getElementById(this.name).value = document.getElementById(this.name).value.replace("," + replaceValue, "");

                         }

                         else if (document.getElementById(this.name).value.indexOf(replaceValue + ",") != -1) {

                             document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue + ",", "");

                         }

                         else {

                             document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue, "");

                         }

                     }

                 }

             });

         } else {

             $(this).parents('tr').addClass('selected');

             //自己增加的代码，获取选择 CheckBox 的值

             var replaceValue = $(this).val();

             $("input[type=text]", document.forms[1]).each(function () {

                 if (this.name == "txtDataKeys") {

                     if (document.getElementById(this.name).value == "") {

                         document.getElementById(this.name).value = replaceValue;

                     }

                     else {

                         document.getElementById(this.name).value += "," + replaceValue;

                     }

                 }

             });

         }

     });

     //例子4：

     $('.cssraindemo3 tbody tr:even').addClass('odd');

     $('.cssraindemo3 tbody tr').hover(

          function () { $(this).addClass('highlight'); },

          function () { $(this).removeClass('highlight'); }

         );

     // 如果单选框默认情况下是选择的，变色.

     $('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');

     // 单选框

     $('.cssraindemo3 tbody tr').click(

          function () {

              $(this).siblings().removeClass('selected');

              $(this).addClass('selected');

              $(this).find('input[type="radio"]').attr('checked', 'checked');

          }

      );

 });

 //全选或者反选

 //一键控制全选、反选、全不选

 $(document).ready(function () {

     $('#myDataTable thead #cbMulController').change(function () {

         if ($(this).is(':checked')) {

             //如果全选是选择状态，其他所有的checkbox 没有选择的编程选择状态，有选择的状态变成没有选中的状态

             var box = $('#myDataTable tbody input[name="cbMultiple"]');

             $('#myDataTable tbody input[name="cbMultiple"]').each(function () {

                 $(this).prop('checked', $(this).is(':checked') ? false : true);

                 //改变所在行的背景颜色，表明是选择的行

                 if ($(this).is(':checked')) {

                     $(this).parents('tr').addClass('selected');

                 }

                 else {

                     if ($(this).parents('tr').hasClass('selected')) {

                         $(this).parents('tr').removeClass('selected');

                     }

                 }

             });

         }

         else {

             //如果全选的是取消状态，剩余的checkbox也取消选中

             $('#myDataTable tbody input[name="cbMultiple"]').each(function () {

                 $(this).prop('checked', $(this).is(':checked') ? false : true);

                 //改变所在行的背景颜色，表明是选择的行

                 if ($(this).is(':checked')) {

                     $(this).parents('tr').addClass('selected');

                 }

                 else {

                     if ($(this).parents('tr').hasClass('selected')) {

                         $(this).parents('tr').removeClass('selected');

                     }

                 }

             });

         }

         //获取所有选择的 checkbox 的值

         var keysArray = new Array();

         $('#myDataTable tbody input[type="checkbox"]:checked').each(function () {

             keysArray.push($(this).val());//向数组中添加元素

         });

         var keysValue = keysArray.join(',');//将数组元素连接起来以构建一个字符串

         //获取值并赋值给 hidden 域

         document.getElementById("txtDataKeys").value = keysValue;

     });

 });

　　　　五、总结了

　　　　　　好了，终于写完了，以后不怕了，这个东西，要想立刻能找到合适的代码不是那么容易，吃一堑长一智，我把这些经常用到的，就留下来，下次再找就容易了。不忘初心，继续努力。

相关文章