鼠标移到隔行变色的表格上,有背景变化,并且点击的时候选中复选框和背景色

时间:2022-06-29 14:49:06
<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(); });
 
鼠标移到隔行变色的表格上,有背景变化,并且点击的时候选中复选框和背景色