JQ——选择器的应用(表格的隔行换色全选和全不选)

Posted zhai1997

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ——选择器的应用(表格的隔行换色全选和全不选)相关的知识,希望对你有一定的参考价值。

1、表格的隔行换色:

(1)核心代码:

    <script>
            $(function(){
                $("tbody tr:even").css("background-color","red");
                $("tbody tr:odd").css("background-color","yellowgreen");
            });
    </script>

获取tbody中的元素,并对奇数行和偶数行分别设置不同的颜色。

(2)效果展示:

技术图片

 

 2、全选和全不选:

(1)核心代码:

        <script>
            $(function(){
                $("#select").click(function(){
                $("tbody input").attr("checked",this.checked);
                });
            });
        </script>

用到了选择器和对属性的设置,使得下面的复选框与第一个保持一致。

(2)效果演示:

技术图片

 

 3、完整代码:

(1)隔行换色:

<html>
<head>
        <meta charset="utf-8">
        <title>成绩登记表格</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("tbody tr:even").css("background-color","red");
				$("tbody tr:odd").css("background-color","yellowgreen");
			});
		</script>
    </head>

    <body>
        <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3" id="tbl">
            <caption>成绩登记表</caption>
        <thead>
            <tr>
				<th align="middle" >序号</th>              
				<th align="middle ">学号</th>
				<th align="middle ">姓名</th>
				<th align="middle ">平时成绩</th>
				<th align="middle ">期末成绩</td>
				<th align="middle ">学期总成绩</th>
            </tr>
        </thead>
        <tbody>
			<tr>
				<td align="middle ">1</td>
				<td align="middle ">20100300201</td>
				<td align="middle ">张小丽</td>
				<td align="middle ">95</td>
				<td align="middle ">95</td>
				<td align="middle ">95</td>
			</tr>

			<tr>
				<td align="middle ">2</td>
				<td align="middle ">20100300202</td>
				<td align="middle ">李宁</td>
				<td align="middle ">90</td>
				<td align="middle ">88</td>
				<td align="middle ">89</td>
			</tr>

			<tr>
				<td align="middle ">3</td>
				<td align="middle ">20100300203</td>
				<td align="middle ">刘梅</td>
				<td align="middle ">98</td>
				<td align="middle ">92</td>
				<td align="middle ">95</td>
			</tr>

			<tr>
				<td align="middle ">4</td>
				<td align="middle ">20100300204</td>
				<td align="middle ">王刚</td>
				<td align="middle ">98</td>
				<td align="middle ">90</td>
				<td align="middle ">94</td>
			</tr>

			<tr>
				<td align="middle ">5</td>
				<td align="middle ">20100300205</td>
				<td align="middle ">郑军</td>
				<td align="middle ">90</td>
				<td align="middle ">85</td>
				<td align="middle ">87</td>
			</tr>

			<tr>
				<td align="middle ">6</td>
				<td align="middle ">20100300206</td>
				<td align="middle ">杨波</td>
				<td align="middle ">80</td>
				<td align="middle ">80</td>
				<td align="middle ">80</td>
			</tr>
	    </tbody>
        </table>
</body>
</html>

(2)全选和全不选:

<html>
    <head>
        <meta charset="utf-8">
        <title>JQ实现全选和全不选</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#select").click(function(){
				$("tbody input").attr("checked",this.checked);
				});
			});
		</script>
    </head>

    <body>
        <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3">
            <caption>成绩登记表</caption>
            <tr>
            	<th><input type="checkbox" id="select"/></th>
				<th bgcolor="blanchedalmond "align="middle" >序号</th>              
				<th bgcolor="blanchedalmond "align="middle ">学号</th>
				<th bgcolor="blanchedalmond "align="middle ">姓名</th>
				<th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
				<th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
				<th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
            </tr>
            
			<tr>
				<td><input type="checkbox" name="checkOne"/></td>
				<td align="middle ">1</td>
				<td align="middle ">20100300201</td>
				<td align="middle ">张小丽</td>
				<td align="middle ">95</td>
				<td align="middle ">95</td>
				<td align="middle ">95</td>
			</tr>

			<tr>
				<td><input type="checkbox" name="checkOne"/></td>
				<td bgcolor="grey "align="middle ">2</td>
				<td bgcolor="grey "align="middle ">20100300202</td>
				<td bgcolor="grey "align="middle ">李宁</td>
				<td bgcolor="grey "align="middle ">90</td>
				<td bgcolor="grey "align="middle ">88</td>
				<td bgcolor="grey "align="middle ">89</td>
			</tr>

			<tr>
				<td><input type="checkbox" name="checkOne"/></td>
				<td align="middle ">3</td>
				<td align="middle ">20100300203</td>
				<td align="middle ">刘梅</td>
				<td align="middle ">98</td>
				<td align="middle ">92</td>
				<td align="middle ">95</td>
			</tr>

			<tr>
				<td><input type="checkbox" name="checkOne"/></td>
				<td bgcolor="grey "align="middle ">4</td>
				<td bgcolor="grey "align="middle ">20100300204</td>
				<td bgcolor="grey "align="middle ">王刚</td>
				<td bgcolor="grey "align="middle ">98</td>
				<td bgcolor="grey "align="middle ">90</td>
				<td bgcolor="grey "align="middle ">94</td>
			</tr>

			<tr>
				<td><input type="checkbox" name="checkOne"/></td>
				<td align="middle ">5</td>
				<td align="middle ">20100300205</td>
				<td align="middle ">郑军</td>
				<td align="middle ">90</td>
				<td align="middle ">85</td>
				<td align="middle ">87</td>
			</tr>

			<tr>
				<td><input type="checkbox" name="checkOne"/></td>
				<td bgcolor="grey "align="middle ">6</td>
				<td bgcolor="grey "align="middle ">20100300206</td>
				<td bgcolor="grey "align="middle ">杨波</td>
				<td bgcolor="grey "align="middle ">80</td>
				<td bgcolor="grey "align="middle ">80</td>
				<td bgcolor="grey "align="middle ">80</td>
			</tr>
        </table>
</body>
</html>

  

以上是关于JQ——选择器的应用(表格的隔行换色全选和全不选)的主要内容,如果未能解决你的问题,请参考以下文章

多选框的全选和全不选(复制)

使用JavaScript完成复选框的全选和全不选

JS——全选和全不选

前端5js:Dom:全选全不选,省市级联,隔行/触摸换色,表单校验

Jquerycheckbox的全选和全不选

react 全选和全不选