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

2019-09-06 10:38:14 1.8k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Jq通过td获取同行其它列td 假设有如下样式表结构在制表时,采取的手把手教你在springMVC中不用框架写表格这篇博客里面写的制表方法,如下所示 function refreshTable(objs){ $("#ObjTables").html(""); for(i in objs){ if(objs[i].obj_Type != "FRAME"){ $("# 阅读详情

如题。

现在可以实现，单击对应类的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>

...全文

吃透Chisel语言.02.Chisel+VS Code+Ubuntu/WSL2开发环境搭建与使用既然是学Chisel语言，那肯定得先把环境配置好，磨刀不误砍柴工嘛。而且有个测试环境的话，在后期的学习过程中自己去试运行代码段可以加深学习效果。这里推荐使用Ubuntu或者基于WSL2（Windows Subsystem Linux 2）的Ubuntu，本人使用的是WSL2上的Ubuntu 20.04.3 LTS，在使用体验上与Ubuntu几乎没有区别，且能同时使用Windows提供的诸多便利。... 阅读详情

sspanzervor1

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

u010667494 2019-09-09

打赏
举报

皮皮熊_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 点击某个tr, 让其包含的从第5个td元素开始，背景全部变红色，再点击取消，请教如何实现？

相关推荐