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

最新推荐文章于 2022-06-22 10:14:36 发布

鱼儿跳

最新推荐文章于 2022-06-22 10:14:36 发布

阅读量1.2k

点赞数

分类专栏： JQ 文章标签： jquery 事件处理事件绑定

本文链接：https://blog.csdn.net/xin9910/article/details/76091291

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQ实现效果：奇偶行颜色不同，单项选择和多项选择

1、表格变色 $('tbody>tr:odd').addClass('odd'); $('tbody>tr:even').addClass('even');2、单项选择列表radio$('tbody>tr').click(function() { $(this).addClass('selected').siblings().removeClass('sele
复制链接

扫一扫