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

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