jquery 全選、反選、獲取值、背景行、隔行變色和鼠標略過變色變色全特效
很久沒有寫東西了，固然不是沒東西可寫，只是沒有時間寫。今天抽出點時間來把我最近使用的一些 Javascript 特效的東西貼出來，供本身或者別人查詢使用。最近我在作一個新的 B/S 系統，因爲沒有專門的美工人員和前端人員，因此這個工做我就擔當起來。後端的代碼是個人本職工做，沒有話說。前端的東西就比較麻煩了。我最開始工做之初也作過美工，因爲本人有繪畫的功底，可是後來就把主要的經歷放在了服務端代碼了，由於大部分公司都會有前端人員來完成相應的工做。javascript
當前的公司在技術方面沒有什麼積累，因此，全部的代碼都要經過本身的編寫來實現，前端也不例外。光前端的工做，原本打算2天搞完，後來發現超時2天。如今我要作一套UI的界面，經過後端數據生成前端的 Html Table 的樣式，這部分工做已經完成。這個界面須要實現如下要求：隔行變色，能夠進行全選、反選，選擇的行變換背景色，而且鼠標通過行也要進行變色，同時，若是有選擇的行，必須獲取 CheckBox 的值，之後能夠進行一些列操做。很久沒有寫前端代碼了，也生了很多，這個過程很麻煩，如今終於過來了。爲了防止之後還有這部分的須要，因此今天就把代碼記錄下來，便於之後查詢使用。（這些對於高手來講，很簡單，我不是高手針對前端，但願高手不要拍磚！）css
1、先上一張圖片，你們來看看效果！
前端
2、有了以上圖片，下面就直接貼代碼了，先上 CSS 代碼。
java
1 table{width:100%;border-collapse:collapse;margin:1em 0;} 2 table, td{font:100% Arial, Helvetica, sans-serif;font-size:13px;} 3 th,td{padding:.5em;border:1px solid #fff;} 4 th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;font-size:14px;font-weight:bold;} 5 td{background:#e5f1f4;font-size:13px; cursor:pointer} 6 7 tr.even td{background:#e5f1f4;} 8 tr.odd td{background:#f8fbfc;} 9 10 tr.highlight td{background:#ecfbd4;} 11 tr.selected td{background:#bce774;color:#555;} 12 13 td input[type=checkbox] { display:inherit;text-align:center;outline:none } 14 td a.button{text-align:center;margin:0 5px; }
3、Html table 的代碼
編程
1 <table id="myDataTable" cellspacing="0" cellpadding="0"> 2 <thead> 3 <tr> 4 <th width="75"><center><label><input type="checkbox" id="cbMulController" name="cbMulController"></label></center></th> 5 <th width="10%">主鍵</th> 6 <th width="10%">帳號名</th> 7 <th width="10%">開始日期</th> 8 <th width="10%">結束日期</th> 9 <th width="10%">登錄日期</th> 10 <th width="10%">登錄次數</th> 11 <th width="10%">啓用</th> 12 <th width="340"><center>管理</center></th> 13 </tr> 14 </thead> 15 <tbody id="tdbody"> 16 <tr> 17 <td><center><input id="cbMultiple_23" name="cbMultiple" type="checkbox" value="23"/></center></td> 18 <td>23</td> 19 <td>liulei123456</td> 20 <td>2019-03-01 18:19:57</td> 21 <td>2019-06-01 18:19:57</td> 22 <td>2019-03-01 18:19:57</td> 23 <td>1</td> 24 <td>True</td> 25 <td><center> 26 <a href="/Backstage/AccountManage/View/23" class="button button-raised button-primary button-small">查看</a> 27 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/23'" class="button button-raised button-caution button-small">刪除</a> 28 <a href="/Backstage/AccountManage/Modify/23" class="button button-raised button-royal button-small">修改</a></center></td> 29 </tr> 30 <tr> 31 <td><center><input id="cbMultiple_22" name="cbMultiple" type="checkbox" value="22"/></center></td> 32 <td>22</td> 33 <td>liulei12345678</td> 34 <td>2019-02-27 17:43:55</td> 35 <td>2019-05-27 17:43:55</td> 36 <td>2019-02-27 17:43:55</td> 37 <td>0</td> 38 <td>True</td> 39 <td><center> 40 <a href="/Backstage/AccountManage/View/22" class="button button-raised button-primary button-small">查看</a> 41 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/22'" class="button button-raised button-caution button-small">刪除</a> 42 <a href="/Backstage/AccountManage/Modify/22" class="button button-raised button-royal button-small">修改</a></center></td> 43 </tr> 44 <tr> 45 <td><center><input id="cbMultiple_9" name="cbMultiple" type="checkbox" value="9"/></center></td> 46 <td>9</td> 47 <td>YangYanShun</td> 48 <td>2019-01-18 14:08:13</td> 49 <td>2019-02-18 14:19:57</td> 50 <td>2019-01-18 14:19:57</td> 51 <td>1</td> 52 <td>True</td> 53 <td><center> 54 <a href="/Backstage/AccountManage/View/9" class="button button-raised button-primary button-small">查看</a> 55 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/9'" class="button button-raised button-caution button-small">刪除</a> 56 <a href="/Backstage/AccountManage/Modify/9" class="button button-raised button-royal button-small">修改</a></center> 57 </td> 58 </tr> 59 <tr> 60 <td><center><input id="cbMultiple_8" name="cbMultiple" type="checkbox" value="8"/></center></td> 61 <td>8</td> 62 <td>YangYanSi</td> 63 <td>2019-01-18 14:08:13</td> 64 <td>2019-02-18 14:19:43</td> 65 <td>2019-01-18 14:19:43</td> 66 <td>1</td> 67 <td>True</td> 68 <td><center> 69 <a href="/Backstage/AccountManage/View/8" class="button button-raised button-primary button-small">查看</a> 70 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/8'" class="button button-raised button-caution button-small">刪除</a> 71 <a href="/Backstage/AccountManage/Modify/8" class="button button-raised button-royal button-small">修改</a></center> 72 </td> 73 </tr> 74 <tr> 75 <td><center><input id="cbMultiple_7" name="cbMultiple" type="checkbox" value="7"/></center></td> 76 <td>7</td> 77 <td>YangYanZhao</td> 78 <td>2019-01-18 14:08:13</td> 79 <td>2019-02-18 14:19:26</td> 80 <td>2019-01-18 14:19:26</td> 81 <td>1</td> 82 <td>True</td> 83 <td><center> 84 <a href="/Backstage/AccountManage/View/7" class="button button-raised button-primary button-small">查看</a> 85 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/7'" class="button button-raised button-caution button-small">刪除</a> 86 <a href="/Backstage/AccountManage/Modify/7" class="button button-raised button-royal button-small">修改</a></center></td> 87 </tr> 88 <tr> 89 <td><center><input id="cbMultiple_6" name="cbMultiple" type="checkbox" value="6"/></center></td> 90 <td>6</td> 91 <td>YangYanDe</td> 92 <td>2019-01-18 14:08:13</td> 93 <td>2019-02-18 14:18:59</td> 94 <td>2019-01-18 14:18:59</td> 95 <td>1</td> 96 <td>True</td> 97 <td><center> 98 <a href="/Backstage/AccountManage/View/6" class="button button-raised button-primary button-small">查看</a> 99 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/6'" class="button button-raised button-caution button-small">刪除</a> 100 <a href="/Backstage/AccountManage/Modify/6" class="button button-raised button-royal button-small">修改</a></center> 101 </td> 102 </tr> 103 <tr><td><center><input id="cbMultiple_5" name="cbMultiple" type="checkbox" value="5"/></center></td> 104 <td>5</td> 105 <td>YangYanHui</td> 106 <td>2019-01-18 14:08:13</td> 107 <td>2019-02-18 14:18:08</td> 108 <td>2019-01-18 14:18:08</td> 109 <td>1</td> 110 <td>True</td> 111 <td> 112 <center> 113 <a href="/Backstage/AccountManage/View/5" class="button button-raised button-primary button-small">查看</a> 114 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/5'" class="button button-raised button-caution button-small">刪除</a> 115 <a href="/Backstage/AccountManage/Modify/5" class="button button-raised button-royal button-small">修改</a></center></td> 116 </tr> 117 <tr> 118 <td><center><input id="cbMultiple_4" name="cbMultiple" type="checkbox" value="4"/></center></td> 119 <td>4</td> 120 <td>YangYanGuang</td> 121 <td>2019-01-18 14:08:13</td> 122 <td>2019-02-18 14:10:33</td> 123 <td>2019-01-18 14:10:33</td> 124 <td>1</td> 125 <td>True</td> 126 <td><center> 127 <a href="/Backstage/AccountManage/View/4" class="button button-raised button-primary button-small">查看</a> 128 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/4'" class="button button-raised button-caution button-small">刪除</a> 129 <a href="/Backstage/AccountManage/Modify/4" class="button button-raised button-royal button-small">修改</a></center></td> 130 </tr> 131 <tr><td><center><input id="cbMultiple_3" name="cbMultiple" type="checkbox" value="3"/></center></td> 132 <td>3</td> 133 <td>YangYanDing</td> 134 <td>2019-01-18 14:08:13</td> 135 <td>2019-02-18 14:10:12</td> 136 <td>2019-01-18 14:10:12</td> 137 <td>1</td> 138 <td>True</td> 139 <td><center> 140 <a href="/Backstage/AccountManage/View/3" class="button button-raised button-primary button-small">查看</a> 141 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/3'" class="button button-raised button-caution button-small">刪除</a> 142 <a href="/Backstage/AccountManage/Modify/3" class="button button-raised button-royal button-small">修改</a></center></td> 143 </tr> 144 <tr><td><center><input id="cbMultiple_2" name="cbMultiple" type="checkbox" value="2"/></center></td> 145 <td>2</td> 146 <td>YangYanPing</td> 147 <td>2019-01-18 14:08:13</td> 148 <td>2019-02-18 14:09:30</td> 149 <td>2019-01-18 14:09:30</td> 150 <td>1</td> 151 <td>True</td> 152 <td><center> 153 <a href="/Backstage/AccountManage/View/2" class="button button-raised button-primary button-small">查看</a> 154 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/2'" class="button button-raised button-caution button-small">刪除</a> 155 <a href="/Backstage/AccountManage/Modify/2" class="button button-raised button-royal button-small">修改</a></center></td> 156 </tr> 157 <tr> 158 <td><center><input id="cbMultiple_1" name="cbMultiple" type="checkbox" value="1"/></center></td> 159 <td>1</td> 160 <td>Administrator123</td> 161 <td>2019-01-18 14:08:13</td> 162 <td>2019-05-05 14:42:35</td> 163 <td>2019-03-06 14:42:35</td> 164 <td>202</td> 165 <td>True</td> 166 <td><center> 167 <a href="/Backstage/AccountManage/View/1" class="button button-raised button-primary button-small">查看</a> 168 <a href="javascript:if(confirm('確實要刪除嗎?'))location='/Backstage/AccountManage/Delete/1'" class="button button-raised button-caution button-small">刪除</a> 169 <a href="/Backstage/AccountManage/Modify/1" class="button button-raised button-royal button-small">修改</a></center> 170 </td> 171 </tr></tbody></table>
4、如下就是最主要的代碼了，JavaScript 代碼，該代碼依賴 JQuery，使用以前請先引入。後端
1 $(document).ready(function () { 2 // 例子1: 3 //-隔行,滑動,點擊 變色 4 $('.cssraindemo1 tbody tr:even').addClass('odd'); 5 $('.cssraindemo1 tbody tr').hover( 6 function () { $(this).addClass('highlight'); }, 7 function () { $(this).removeClass('highlight'); } 8 ); 9 $('.cssraindemo1 tbody tr').click( 10 function () { $(this).toggleClass('selected'); } 11 ); 12 13 14 //例子2：能夠選擇 checkbox 或者點擊行控制行的顏色和 checkbox 是不是選中狀態: 15 $('#myDataTable tbody tr:even').addClass('odd'); 16 $('#myDataTable tbody tr').hover( 17 function () { $(this).addClass('highlight'); }, 18 function () { $(this).removeClass('highlight'); } 19 ); 20 // 若是複選框默認狀況下是選擇的，變色. 21 $('#myDataTable input[type="checkbox"]:checked').parents('tr').addClass('selected'); 22 // 複選框 23 $('#myDataTable tbody tr').find("td:first").click( 24 function () { 25 if ($(this).parents('tr').hasClass('selected')) { 26 $(this).parents('tr').removeClass('selected'); 27 $(this).find('input[type="checkbox"]').removeAttr('checked'); 28 29 //本身增長的代碼，獲取選擇 CheckBox 的值 30 var replaceValue = $(this).find('input[type="checkbox"]').val(); 31 $("input[type=text]", document.forms[0]).each(function () { 32 if (this.name == "txtDataKeys") { 33 if (document.getElementById(this.name).value.length != 0) { 34 if (document.getElementById(this.name).value.indexOf("," + replaceValue) != -1) { 35 document.getElementById(this.name).value = document.getElementById(this.name).value.replace("," + replaceValue, ""); 36 } 37 else if (document.getElementById(this.name).value.indexOf(replaceValue + ",") != -1) { 38 document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue + ",", ""); 39 } 40 else { 41 document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue, ""); 42 } 43 } 44 } 45 }); 46 } else { 47 $(this).parents('tr').addClass('selected'); 48 $(this).find('input[type="checkbox"]').attr('checked', 'checked'); 49 50 //本身增長的代碼，獲取選擇 CheckBox 的值 51 var replaceValue = $(this).find('input[type="checkbox"]').val(); 52 $("input[type=text]", document.forms[0]).each(function () { 53 if (this.name == "txtDataKeys") { 54 if (document.getElementById(this.name).value == "") { 55 document.getElementById(this.name).value = replaceValue; 56 } 57 else { 58 document.getElementById(this.name).value += "," + replaceValue; 59 } 60 } 61 }); 62 } 63 } 64 ); 65 66 67 //例子3：選擇 checkbox 控制行的顏色 68 $('#myDataTable tbody tr:even').addClass('odd'); 69 $('#myDataTable tbody tr').hover( 70 function () { $(this).addClass('highlight'); }, 71 function () { $(this).removeClass('highlight'); } 72 ); 73 //若是複選框默認狀況下是選擇的，變色. 74 $('#myDataTable tbody input[type="checkbox"]:checked').parents('tr').addClass('selected'); 75 //複選框 76 $('#myDataTable tbody input[type="checkbox"]').change(function () { 77 if ($(this).is(':checked') == false) { 78 $(this).parents('tr').removeClass('selected'); 79 80 //本身增長的代碼，獲取選擇 CheckBox 的值 81 var replaceValue = $(this).val(); 82 $("input[type=text]", document.forms[1]).each(function () { 83 if (this.name == "txtDataKeys") { 84 if (document.getElementById(this.name).value.length != 0) { 85 if (document.getElementById(this.name).value.indexOf("," + replaceValue) != -1) { 86 document.getElementById(this.name).value = document.getElementById(this.name).value.replace("," + replaceValue, ""); 87 } 88 else if (document.getElementById(this.name).value.indexOf(replaceValue + ",") != -1) { 89 document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue + ",", ""); 90 } 91 else { 92 document.getElementById(this.name).value = document.getElementById(this.name).value.replace(replaceValue, ""); 93 } 94 } 95 } 96 }); 97 } else { 98 $(this).parents('tr').addClass('selected'); 99 100 //本身增長的代碼，獲取選擇 CheckBox 的值 101 var replaceValue = $(this).val(); 102 $("input[type=text]", document.forms[1]).each(function () { 103 if (this.name == "txtDataKeys") { 104 if (document.getElementById(this.name).value == "") { 105 document.getElementById(this.name).value = replaceValue; 106 } 107 else { 108 document.getElementById(this.name).value += "," + replaceValue; 109 } 110 } 111 }); 112 } 113 }); 114 115 //例子4： 116 $('.cssraindemo3 tbody tr:even').addClass('odd'); 117 $('.cssraindemo3 tbody tr').hover( 118 function () { $(this).addClass('highlight'); }, 119 function () { $(this).removeClass('highlight'); } 120 ); 121 // 若是單選框默認狀況下是選擇的，變色. 122 $('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected'); 123 124 // 單選框 125 $('.cssraindemo3 tbody tr').click( 126 function () { 127 $(this).siblings().removeClass('selected'); 128 $(this).addClass('selected'); 129 $(this).find('input[type="radio"]').attr('checked', 'checked'); 130 } 131 ); 132 }); 133 134 //全選或者反選 135 //一鍵控制全選、反選、全不選 136 $(document).ready(function () { 137 $('#myDataTable thead #cbMulController').change(function () { 138 if ($(this).is(':checked')) { 139 //若是全選是選擇狀態，其餘全部的checkbox 沒有選擇的編程選擇狀態，有選擇的狀態變成沒有選中的狀態 140 var box = $('#myDataTable tbody input[name="cbMultiple"]'); 141 $('#myDataTable tbody input[name="cbMultiple"]').each(function () { 142 $(this).prop('checked', $(this).is(':checked') ? false : true); 143 144 //改變所在行的背景顏色，代表是選擇的行 145 if ($(this).is(':checked')) { 146 $(this).parents('tr').addClass('selected'); 147 } 148 else { 149 if ($(this).parents('tr').hasClass('selected')) { 150 $(this).parents('tr').removeClass('selected'); 151 } 152 } 153 }); 154 } 155 else { 156 //若是全選的是取消狀態，剩餘的checkbox也取消選中 157 $('#myDataTable tbody input[name="cbMultiple"]').each(function () { 158 $(this).prop('checked', $(this).is(':checked') ? false : true); 159 160 //改變所在行的背景顏色，代表是選擇的行 161 if ($(this).is(':checked')) { 162 $(this).parents('tr').addClass('selected'); 163 } 164 else { 165 if ($(this).parents('tr').hasClass('selected')) { 166 $(this).parents('tr').removeClass('selected'); 167 } 168 } 169 }); 170 } 171 172 //獲取全部選擇的 checkbox 的值 173 var keysArray = new Array(); 174 $('#myDataTable tbody input[type="checkbox"]:checked').each(function () { 175 keysArray.push($(this).val());//向數組中添加元素 176 }); 177 var keysValue = keysArray.join(',');//將數組元素鏈接起來以構建一個字符串 178 //獲取值並賦值給 hidden 域 179 document.getElementById("txtDataKeys").value = keysValue; 180 }); 181 });
5、總結了數組
好了，終於寫完了，之後不怕了，這個東西，要想馬上能找到合適的代碼不是那麼容易，吃一塹長一智，我把這些常常用到的，就留下來，下次再找就容易了。不忘初心，繼續努力。ui
相關文章
- 1. 排序+刪除+全選+反選+隔行變色
- 2. javascript 隔行變色，鼠標滑過變色
- 3. jquery tr行 通過背景色變化
- 4. JQuery - 鼠標通過table的行變色
- 5. css 隔行變色， 隔列變色
- 6. 隔行變色
- 7. JS---案例：表格隔行變色(鼠標劃過背景色恢復)
- 8. JS 隔行變色
- 9. 選中一行變色
- 10. 最簡單的背景顏色、背景圖顏色鼠標滑過變換
- 更多相關文章...
- • PHP 超級全局變量 - PHP教程
- • ionic 顏色 - ionic 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 排序+刪除+全選+反選+隔行變色
- 2. javascript 隔行變色，鼠標滑過變色
- 3. jquery tr行 通過背景色變化
- 4. JQuery - 鼠標通過table的行變色
- 5. css 隔行變色， 隔列變色
- 6. 隔行變色
- 7. JS---案例：表格隔行變色(鼠標劃過背景色恢復)
- 8. JS 隔行變色
- 9. 選中一行變色
- 10. 最簡單的背景顏色、背景圖顏色鼠標滑過變換