<pre name="code" class="html"><div class="aidcontent"> <div class="tab"> <div class="buginfo"> <span>发生时间:</span> <input type="text"/> <span class="tro">故障名称:</span> <input type="text"/> </div> <div class="tab_btn"> <button class="alter">查询</button> <button class="add">添加</button> <button class="delete">删除</button> </div> </div> <div class="bugList"> <table class="bugtable" style:'border="0" cellspacing="0" cellpadding="0" margin:0 padding:0'> <tr class="header"> <th class="numorder">序号</th> <th class="happentime">发生时间</th> <th class="bugname">故障名称</th> <th class="perheading">处理人</th> <th class="introtime">解决时间</th> </tr> <tr> <td class="numorder"> <a><img src="img/unchecked.png" /></a> <span>01</span> </td> <td class="happentime">2014-05-13 00:00</td> <td class="bugname">紧急处理紧急处理紧急处理紧急处理</td> <td class="perheading">张三三</td> <td class="introtime">2014-05-14 00:00</td> </tr> <tr> <td class="numorder"> <a><img src="img/unchecked.png" /></a> <span>02</span> </td> <td class="happentime">2014-05-13 00:00</td> <td class="bugname">紧急处理紧急处理紧急处理紧急处理</td> <td class="perheading">张三三</td> <td class="introtime">2014-05-14 00:00</td> </tr> <tr> <td class="numorder"> <a><img src="img/unchecked.png" /></a> <span>03211115555555555</span> </td> <td class="happentime">2014-05-13 00:00</td> <td class="bugname">紧急处理紧急处理紧急处理紧急处理</td> <td class="perheading">张三三</td> <td class="introtime">2014-05-14 00:00</td> </tr> </table> </div>
js:-------------仅参考
<span style="color:#009900;"> changecolor(); //隔行变色 function changecolor() { var i = 0; var jian = 0; $('.bugtable tr').each(function () { i++; jian = i - 1; if (jian > 0) { //双行 if (jian % 2 == 0) { $(this).addClass("odd"); } else { $(this).addClass("even"); } } }) }</span> //移动变色 $('.bugtable tr').mouseover(function () { $(this).addClass("move"); }); $('.bugtable tr').mouseout(function () { $(this).removeClass("move"); }); var ht; var num = 0; //移出变会原来颜色 $('.bugtable tr').mouseout(function () { ht = $(this).find('td').eq(0).html(); if (ht != "undefined") { num = parseInt(ht.replace(/[^0-9]/ig, "")); if ($(this).find("td").eq(0).find("img").attr("class") != "checked") { if (num % 2 == 0) { $(this).addClass("odd"); } else { $(this).addClass("even"); } } } }); //选中一行背景变色 $("table tr.even").click(function () { if ($(this).find("td").eq(0).find("img").attr("class") == "checked") { $(this).removeClass("checked_tr"); $(this).find("td").eq(0).find("img").removeClass('checked'); } else { $(this).addClass("checked_tr"); $(this).find("td").eq(0).find("img").attr("class", "checked"); } }) $("table tr.odd").click(function () { if ($(this).find("td").eq(0).find("img").attr("class") == "checked") { $(this).removeClass("checked_tr"); $(this).find("td").eq(0).find("img").removeClass('checked'); } else { $(this).addClass("checked_tr"); $(this).find("td").eq(0).find("img").attr("class", "checked"); } }) //删除 $(".tab_btn .delete").click(function () { $('td .checked').parent().parent().parent().remove(); $('.tab_btn .delete').attr('style', 'background-color:"#07C0D0"'); window.location.reload(); });