Jquery 点击某个tr, 让其包含的从第5个td元素开始，背景全部变红色，再点击取消，请教如何实现？

sspanzervor1 2019-09-06 10:38:14
如题。

现在可以实现，单击对应类的tr标签，其中所有背景白色均变为红色，反之亦然；
但是现在要求是点击tr行，只能需要从第五个元素开始变色，请教论坛各位前辈，这样的需求，应如何选择元素？拜谢！




    $('tr.row_slt').click(function(){

		alert('aaa');

		alert(this);

      if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){

       	this.style.cssText='background-color:red';

      }else{

        this.style.cssText='background-color:#fff';

      }

	})


实际案例是前面几项为房型房号信息，从第5个元素开始，为某个时间段的房间占用情况显示（灰色的是已占用）


         <table>

                   <tr class="row_slt"  tyle="text-align:center; height:30px; font-size:12px;">

                    		<td>4F        </td>

                            <td>403</td>

                            <td>VVIP</td>

                           <td><input type="checkbox" name="chk_1" value="2"/></td>

                        		

						<td style="width:20px; background:gray;" >  </td>

									

						<td style="width:20px; background:gray;" >  </td>

									

						<td style="width:20px; background:gray;" >  </td>

									

						<td style="width:20px; background:gray;" >  </td>

									

						<td style="width:20px; background:gray;" >  </td>

									

						<td style="width:20px; background:gray;" >  </td>

									

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

						<td style="width:20px;">  </td>

                       				

                    </tr>

          </table>
...全文
1732 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
u010667494 2019-09-09
  • 打赏
  • 举报
 回复
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <table> <tr> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> </table> <style> .active { background: red; color: #fff; } </style> <script> $('tr').on('click', function () { $(this).children('td').each((index, el) => { if (index > 4) { if ($(el).hasClass('active')){ $(el).removeClass('active') } else { $(el).addClass('active') } } }) }) </script>
皮皮熊_1989 2019-09-09
  • 打赏
  • 举报
 回复
jquery 筛选器研究下
靳毅 2019-09-08
  • 打赏
  • 举报
 回复
还不错的分享
風灬雲 2019-09-08
  • 打赏
  • 举报
 回复 

  $('tr.row_slt').click(function(){
        alert('aaa');
        alert(this);
     if($(this).attr("status")==="active"){
          for(let i = 4;i< $(this).find('td').length;i++){
              $(this).find('td').eq(i).css('background-color','#fff')
          }
          $(this).attr("status","")
     } else {
         for(let i = 4;i< $(this).find('td').length;i++){
              $(this).find('td').eq(i).css('background-color','red')
          }
          $(this).attr("status","active")
     }
    })
sspanzervor1 2019-09-08
  • 打赏
  • 举报
 回复
还是没搞好，盼请各位大大指教～
sspanzervor1 2019-09-07
  • 打赏
  • 举报
 回复
现在发现一个问题，就是 点击TR行中除 checkbox以外的任何元素，都没有问题，但点击checkbox时，似乎checkbox本身的checked属性不生效，不知应如何处理？请教各位前辈，多谢～
sspanzervor1 2019-09-07
  • 打赏
  • 举报
 回复
如下代码，点击除了点击该行的任何区域，都可以实现，从第5列开始变色和取消变色的效果，td(3)的checkbox同时置于checked/not checked的状态切换；但是，点击checkbox本身，却无法实现“选中”和“取消选中”的切换，不知应该如何修改？盼请指教，不胜感激～ 


    $('tr.row_slt').click(function(){

			if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){
       	    	$(this).children('td').each(function(index, el) {
     	 			if (index > 3) {
       					if ($(el).hasClass('active')){
          					$(el).removeClass('active');
        				} else {
          					$(el).addClass('active')
       			 		}
      				}
					else if (index == 3){
						if ($(el).children(":checkbox").is(":checked")) {
							$(el).children(":checkbox").attr("checked",false);}
        				 else {
							$(el).children(":checkbox").attr("checked",true);}       			 		
					}
    			})

	  		}else{
        		$("tr td:gt(5)").style.cssText='background-color:#fff;';
      		}
	})


                    <tr class="row_slt"  tyle="text-align:center; height:30px; font-size:12px;">
                    		<td style="height:22px;">4F        </td>
                            <td>403</td>
                            <td>VVIP</td>
                           <td><input type="checkbox" class="chk_slt" readonly name="chk_1" id="chk_1" value="2"/></td>
                        		
						<td style="width:20px; background:gray;" >  </td>
									
						<td style="width:20px; background:gray;" >  </td>
									
						<td style="width:20px; background:gray;" >  </td>
									
						<td style="width:20px; background:gray;" >  </td>
									
						<td style="width:20px; background:gray;" >  </td>
									
						<td style="width:20px; background:gray;" >  </td>
									
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
						<td style="width:20px;">  </td>
                       				
                    </tr>
Hello World, 2019-09-07
  • 打赏
  • 举报
 回复
引用 15 楼 sspanzervor1 的回复:
现在发现一个问题，就是 点击TR行中除 checkbox以外的任何元素，都没有问题，但点击checkbox时，似乎checkbox本身的checked属性不生效，不知应如何处理？请教各位前辈，多谢～

你现在的代码是啥样，具体不正常的情况是什么？
sspanzervor1 2019-09-06
  • 打赏
  • 举报
 回复
多谢楼上高手的指点，运行时 $(this).children('td').each((index, el) => { 提示有语法错误？
jio可 2019-09-06
  • 打赏
  • 举报
 回复 

<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
<table>
  <tr>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
  </tr>
  <tr>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
  </tr>
</table>
<style>
.active {
  background: red;
  color: #fff;
}
</style>
<script>
  $('tr').on('click', function () {
    $(this).children('td').each((index, el) => {
      if (index > 4) {
        if ($(el).hasClass('active')){
          $(el).removeClass('active')
        } else {
          $(el).addClass('active')
        }
      }
    })
  })
</script>
jio可 2019-09-06
  • 打赏
  • 举报
 回复
点击的时候循环给大于5的td加一个样式（active），每次循环判断是否存在这个(active)存在就删除，不存在就添加。使用Jq的这几个方法addClass,hasClass,removeClass
sspanzervor1 2019-09-06
  • 打赏
  • 举报
 回复
您好 问下 index是根据顺序生成的？不用专门在td标签指定吧 我感觉是那个Gt(5)的选择器没生效 不知何故～
mywzj666 2019-09-06
  • 打赏
  • 举报
 回复
这个选择器是选择index大于5的元素的选择器，你可以测试一下是否被选中。其实用比较原始的方法也能实现，你可以把全部的td全都改变颜色，再把前五个改回来
sspanzervor1 2019-09-06
  • 打赏
  • 举报
 回复
刚才试过了，不生效～
sspanzervor1 2019-09-06
  • 打赏
  • 举报
 回复
引用 1 楼 mywzj666 的回复:
$("tr td:gt(5)) 这样写试试
谢谢您的答复，是把原来里面的this 都换成$("tr td:gt(5)") ？
mywzj666 2019-09-06
  • 打赏
  • 举报
 回复
$("tr td:gt(5)) 这样写试试
Hello World, 2019-09-06
  • 打赏
  • 举报
 回复
判断就用hasClass()，切换类不用判断，用toggleClass就可以了
sspanzervor1 2019-09-06
  • 打赏
  • 举报
 回复
多谢楼上各位战友的指点，请教一下，如果获取 checkbox所在的<Td>的右侧相邻<td>是否有.active 类，应该如何写？
scscms太阳光 2019-09-06
  • 打赏
  • 举报
 回复 
<script>

    $('tr').on('click', function () {

        $('td:nth-child(n+5)', this).toggleClass('active')

    })

</script>
Hello World, 2019-09-06
  • 打赏
  • 举报
 回复 


    $('tr.row_slt').click(function(){

      var tds =$(this).find('td:gt(3)');

      if((tds[0].style.backgroundColor=='')||(tds[0].style.backgroundColor=='rgb(255, 255, 255)')){

       	tds.css({'background-color':'red'});

      }else{

        tds.css({'background-color':'#fff'});

      }

	});
加载更多回复（2）
jQuery实现报表的折叠效果（可填报）
一：折叠报表两种实现方案 折叠报表在BS项目有着广泛的应用，在公司内部，报表工具在解决折叠报表时通常有两种方案： 1） 利用报表工具的隐藏行属性，通过传递参数刷新报表实现。 2） 通过jQuery的show(),hide()方法对报表进行tr的显示，隐藏操作。 二：两种折叠方案的对比 第一种折叠方案: 优点：js方法比较简单。 缺点：无法进行填报，每次折叠...
jquery的pagination插件实现无刷新的分页
最近在群里，有成员问道了无刷新分页的问题，碰巧前一段时间正好实现了这个功能，而且还在这个基础上增加了自己的一点特制的功能，比如筛选、排序功能。不过今天就先不涉及，先从简单的分页讲起。 首先，我们要准备的文件有：jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。 先把要用到的...
jquery pagination 实现无刷新的分页
首先，我们要准备的文件有：jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。 先把要用到的文件依次进入进来： script src="common/jquery.js" type="text/javascript">script> script src="common/jq
利用Jquery中的pagination插件实现无刷新的分页
最近在群里，有成员问道了无刷新分页的问题，碰巧前一段时间正好实现了这个功能，而且还在这个基础上增加了自己的一点特制的功能，比如筛选、排序功能。不过今天就先不涉及，先从简单的分页讲起。 首先，我们要准备的文件有：jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。 先把要用到的...
第5章 jQuery对表单、表格的操作及更多应用
本章主要是对前面4章的小结和应用。 一. 表单form应用 表单分为3个组成部分 （1）form标签 表单可包含文本域，复选框，单选按钮等等。表单用于向指定的URL传递用户数据。 （2）表单域 ——文本框、密码框(password)，隐藏域，多行文本域（textarea）,复选框（checkbox），单选框（radio）,下拉框（select）文件上传框 （3）表单按钮 —...
JavaScript

87,920

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章