JQ实现效果：奇偶行颜色不同，单项选择和多项选择

来源：互联网发布：重庆计划软件编辑：程序博客网时间：2024/06/05 10:47

1、表格变色

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

2、单项选择列表radio

$('tbody>tr').click(function() {    $(this).addClass('selected').siblings().removeClass('selected')    .end()    .find(':radio').attr('checked',true);    });

对表单中的行进行操作：增加类，去除原来的类，并对所选择的项的属性设置为选中。

整体代码：

<!DOCTYPE html><html><head>    <title>char 5.2.1</title>    <meta charset="utf-8" />    <style type="text/css">    .even{    background-color: #fff38f;    }    .odd{    background-color: #ffffee;    }    .selected{    background-color: #feeeee;    }    </style>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">    $(function(){    $('tbody>tr:odd').addClass('odd');    $('tbody>tr:even').addClass('even');    //$('tr:contains("王五")').addClass('selected');    $('tbody>tr').click(function() {    $(this).addClass('selected').siblings().removeClass('selected')    .end()    .find(':radio').attr('checked',true);    });    //获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')    $('table :radio:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！        });    </script></head><body>    <table>        <thead>            <tr>                <th colspan="2">姓名</th>                <th>性别</th>                <th>暂住地</th>            </tr>        </thead>        <tbody>            <tr><td><input type="radio" name="choice" value=""/></td>                <td>王五</td>                <td>男</td>                <td>山东</td>            </tr>            <tr><td><input type="radio" name="choice" value="" checked="checked" /></td>                <td>赵六</td>                <td>男</td>                <td>山东</td>            </tr>            <tr><td><input type="radio" name="choice" value=""/></td>                <td>张三</td>                <td>男</td>                <td>山东</td>            </tr>        </tbody>    </table></body></html>

3、多项选择Checkbox

多项选择可以选择多个高亮，主要在于高亮的判断

<!DOCTYPE html><html><head>    <title>char 5.2.1</title>    <meta charset="utf-8" />    <style type="text/css">    .even{    background-color: #fff38f;    }    .odd{    background-color: #ffffee;    }    .selected{    background-color: #feeeee;    }    </style>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">    $(function(){    $('tbody>tr:odd').addClass('odd');    $('tbody>tr:even').addClass('even');    //对表单进行操作    $('tbody>tr').click(function() {    //判断是否是高亮了，使用hasclass（）    if($(this).hasClass('selected')){    $(this).removeClass('selected')    .find(':checkbox').attr('checked',false);    }else{    $(this).addClass('selected')    .find(':checkbox').attr('checked', true);    }        });    //获取父结点相应的元素。也可以直接获得$('tbody>tr :has(:checked).addClass('selected')')    $('table :checkbox:checked').parents("tr").addClass('selected');//一定要注意parents是复数！！        });    </script></head><body>    <table>        <thead>            <tr>                <th colspan="2">姓名</th>                <th>性别</th>                <th>暂住地</th>            </tr>        </thead>        <tbody>            <tr><td><input type="checkbox" name="choice" value=""/></td>                <td>王五</td>                <td>男</td>                <td>山东</td>            </tr>            <tr><td><input type="checkbox" name="choice" value="" checked="checked" /></td>                <td>赵六</td>                <td>男</td>                <td>山东</td>            </tr>            <tr><td><input type="checkbox" name="choice" value=""/></td>                <td>张三</td>                <td>男</td>                <td>山东</td>            </tr>        </tbody>    </table></body></html>

阅读全文

0 0