正文 

当前位置： 首页 > 开发 > java教程

jq——选择器的应用（表格的隔行换色全选和全不选）(代码片段)

zhai1997 zhai1997     2023-04-24     628

关键词：

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>

　　

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

...批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。查看演示HTML我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一... 查看详情

jquerycheckbox的全选和全不选

刚学Jquery，在做checkbox的全选全不选时遇到了一个问题，使用attr()方法的话，只能成功全选和取消全选一次，第二次就不行了，如下面$("#chkAll").click(function(){if(this.checked==true){$("#tabinput[type=‘checkbox‘]").attr("checked",true);}else{$("#tabi... 查看详情

react全选和全不选

状态：this.state={check:false,checks:false,}js:showInput=(e)=>{//全选和全不全console.log(e.target.checked);this.setState({check:e.target.checked,checks:e.target.checked,})}render()<Fragment><divsty 查看详情

前端小demo——全选和全不选

模拟购物车，实现全选或者全不选，或者其中任意一件单品单选的效果。点击顶部复选框实现全选列表中任意一项未选中，顶部复选框就是未选中的状态<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></t... 查看详情

javascript实现全选和全不选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <script> functionselectAll(num){ //获取下面的四个复选框 varres=document.getElementsByClassN 查看详情

js实现checkbox的全选和全不选功能

html代码：<formname="form1"method="post"action="manage.php?act=sub"><inputtype="checkbox"name="mm[]"value="<?=$row[‘0‘]?>"onClick="checkAll(this,‘mm‘)"><!--checkbox实现选择多条记录-->< 查看详情

26.jquery全选和全不选

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> 查看详情

jquery案例二：实现全选全不选和反选(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情

vue2.0实现全选和全不选(代码片段)

实现思路：1、v-model一个收集所有input（除全选框外）数组checkModel，vue会动态将其checked为true的input的value值存入数组checkModel里2、watch函数来监听checkModel属性，当其长度==input元素时全选按钮选中否则取消3、全选按钮v-modelchecked属... 查看详情

jquery版的全选，全不选和反选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时，我们可以用checked的属性选中了就返回true，没被选中就返回false;这是html代码：<formaction="#"><labelfor="hobby">爱好：</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情

jquery判断checkbox是否选中及改变checkbox状态

在用jquery判断checkbox的选中上.在用的$().attr(‘checked‘)做全选和反选的时候出现一个问题,点第一二次可以选中和全不选,但第三次的时候就没有反应了 之后用了$().prop() 就可以了//全选和全不选$("#allorone_check").click(function(){... 查看详情

jq全选全不选

$(document).ready(function(){$("#isalldebt").click(function() { if($(this).attr("checked")){//全选 $("input[name=‘debt_type‘]").each(function(){ $(this).attr("checked",true); 查看详情

用jquery实现（全选反选全不选功能）

在jQuery选择器的基础下我们实现一个全选，反选，全不选功能！   <scripttype="text/javascript">       $(function()           查看详情

jquery应用实例3：全选二级联动

全选：这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8378221.html如果使用jQuery则会方便很多：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选</title><scripttype="text 查看详情

jquery实现复选框全选全不选反选问题解析

　　今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，j... 查看详情

js中checkbox全选怎么写

...hecked",false);//清空);这是我写的博客地址，比较简单的选择，但还算实用http://blog.csdn.net/qq_30252319/article/details/51991404#本回答被提问者采纳 参考技术BCheckBox复选框JS实现全选全不选功能,很简单，就只需插入一小段js函数就行了... 查看详情

jquery应用实例2：表格隔行换色

这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8376312.html接下来利用上一篇提到的选择器利用jQuery实现： 发现原来多行代码这里只需要两行：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>表格隔行换色</ti 查看详情