首页 / JAVASCRIPT / javascript-使用复选框更改行和列的字体颜色

javascript-使用复选框更改行和列的字体颜色

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-使用复选框更改行和列的字体颜色，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8485字，纯文字阅读大概需要13分钟。

内容图文

我正在寻找一种方法来更改表的行和列内容的字体颜色,并在表的顶部和左侧分配已分配的复选框.因此,当单击复选框时,相应的行或列内容都会更改字体颜色.我不需要多种颜色.我只需要将字体颜色更改为仅指定的颜色.可以同时单击多个行复选框和列复选框,这不会引起麻烦.谢谢您的帮助！

这也是一个jsfiddle：https://jsfiddle.net/u6xzfnq7/

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

  

 <table class="tb">
    <tbody>
        <tr>
            <td></td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check1" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check2" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check3" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check4" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check5" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check6" /> Switch</label>
            </td>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check7" /> Switch</label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check8" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check10" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check11" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check12" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check13" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check14" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check15" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check16" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check17" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Number</td>
            <td>Text</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check18" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check19" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check20" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check21" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check22" /> Switch</label>
            </td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        <tr>
            <td>
                <label class="color-switch">
                    <input type="checkbox" id="check23" /> Switch</label>
            </td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
            <td>Number</td>
        </tr>
    </tbody>
</table>

解决方法:

您可以执行以下操作：

//Add listener on checbox inside the table with class .tb
$('.tb input[type="checkbox"]').change(function() {

  //Remove all selected
  $('.tb td').removeClass('selected');

  //Add class on rows
  //Select all checked checkbox on the first column
  //Select the parent td and select its siblings
  //Add Class
  $('.tb tr>td:first-child').find('input[type="checkbox"]:checked').each(function() {
    $(this).parent().parent().addClass('selected').siblings().addClass('selected');
  })

  //Add class on columns
  //Select all checkboxes on the first row.
  //Loop and check if checked.
  //If checked, add class on the column
  $('.tb tr:first-child').find('input[type="checkbox"]').each(function(i) {
    if ($(this).is(":checked"))
      $('.tb tr>td:nth-child(' + (i + 2) + ')').addClass('selected');
  })
})

.tb {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tb td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
  <tbody>
    <tr>
      <td></td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
				<input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Number</td>
      <td>Text</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>
        <label class="color-switch">
                <input type="checkbox"/> Switch</label>
      </td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
      <td>Number</td>
    </tr>
  </tbody>
</table>

内容总结

以上是互联网集市为您收集整理的javascript-使用复选框更改行和列的字体颜色全部内容，希望文章能够帮你解决javascript-使用复选框更改行和列的字体颜色所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/685691.html

来源：【匿名】

【上一篇】javascript-JS Fetch API无法与具有Authorize属性的ASP.NET Core 2控制器一起使用【下一篇】javascript 怎么调用php方法

更多 ►

【javascript-使用复选框更改行和列的字体颜色】教程文章相关的互联网学习教程文章

JavaScript事件处理学习（2）—单选按钮复选框下拉框操作【代码】【图】

1 <html>2 <head>3 <title>dsd</title>4 <script language="JavaScript">5function show1(){6var name=document.myform.name.value //保存姓名 7 alert("姓名"+name);8var sex; //保存性别 9if(document.myform.sex[0].checked){ //如果第一个元素被选中10 sex=document.myform.sex[0].value; 11 }else {sex=document.myform.sex[1].value;} 12 alert("性别"+sex); 13var ints=...

javascript实现复选框的全选全不选【代码】

通过复选框的id获取到复选框元素对复选框绑定点击事件每个checkbox都设置相同的name checkOne通过得到的元素获取checkbox的状态当点击全选全不选checkbox时，检查全选全不选的box状态，如果为true就将所有其他box状态都设置为true如果全选全不选的状态为false，相应的就将其他所有的box状态checked设置为false<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>全选和全不选</title><script type="text/javascript">fun...

JQuery、js判断复选框是否选中状态

JQuery:var $isChecked = $("#id").is(":checked");alert($isChecked);JS:var $id = document.getElementById("id");alert($id.checked); Notes:JQuery中，is函数里的必须要有冒号，否则不见效；JS中，必须调用checked 即>>> .checked原文：http://www.cnblogs.com/vincentExclusiveBlog/p/5353464.html

js实现多级复选框的交互【代码】【图】

功能介绍整个复选框是包含多级，可能有父级，可能有子级，在勾选复选框时，要做两种判断：1要判断它下面有没有子级，有子级将子级的选中状态checked变得和自己一样。2要判断它是否有父级，有父级勾选时判断同级兄弟是否都是选中状态，如果选中将父级勾选上；取消勾选时将父级的勾选状态变为false 复选框交互要实现的效果如下: 实现思路说明 1.设计一种方式让我们知道谁是自己的父级谁是自己的子级。我是用的<input>的name和id值标...

JavaScript获取复选框的值【代码】

使用JavaScript获取复选框的值 <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>获取复选框的值</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script>$(function(){var byBrand = "";$("#but").click(function(){var brandValueList = $(‘input[name="test"]:checked‘);for (var i = 0; i < brandValueList.length; i++) {byBrand = $(brandValueList[i]).val();al...

layui-table表复选框勾选的所有行数据获取的例子【图】

项目需求，可以用复选框勾选项目进行提交，如下表 <table class="layui-table" lay-data="{url:******, id:test3}" lay-filter="test3"><thead><tr><th lay-data="{type:checkbox}">ID</th><th lay-data="{field:id, width:80}">ID</th><th lay-data="{field:t1}">测试项</th><th lay-data="{field:t2, edit: text}">标定参数</th><th lay-data="{field:t3}">标定值</th></tr></thead> </table>我们已经获取到了表中所有行的数据，...

JavaScript-JQuery：复选框链无法正常工作【代码】

我有复选框的“链”(父复选框和子复选框),问题是：第一次单击“父”复选框时,它运行良好,但是之后,单击“孩子”时,则“父”复选框不执行应有的功能.父母正在检查/取消检查孩子,除了之前被压过的孩子. 这是代码：的JavaScriptchecks_bind(); function checks_bind(){$("#x_main").off('click');$("#x_main").on('click',function(){var obj = $(this);var val = obj.is(':checked');$("#checks").find("input[type='checkbox']"...

js和jquery分别验证单选框、复选框、下拉框

本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)，分享给大家供大家参考，具体内容如下 (1).首先说单选框(radio)，radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了。 js验证是要用getElementsByName()获取数组 js代码如下：<script>function test(){var sex = document.getElementsByName("sex");var flag = 0;for (var i...

，帮忙看看上面代码哪里异常了JS显示Stackoverflowatline:0复选框全选和单选的时候也有点有关问题

求助，急，帮忙看看下面代码哪里错误了 JS显示Stack overflow at line:0 复选框全选和单选的时候也有点问题日志日期工作日志费用日志备注合计状态操作 ...

layui怎么设置复选框【图】

首先需要引入layui的js脚本文件，和css样式文件。需要使用jquery的，也引入对应文件。html里，我们写上对应的复选框控件，就是平时常用的checkbox。但这里需要注意的是checkbox要加一个title值，而且控件要放在样式为layui-form的form表单里。在页面加载完函数ready里，（这里使用jquery的），我们要引入layui的form组件，然后调用render方法。就这样，基本上就行了，并没有太多复杂的东西。运行页面，可以看到漂亮的复选框就呈现了...

JavaScript如何实现表单的复选框验证【图】

本篇文章给大家带来的内容是介绍js如何实现表单的复选框验证，在表单提交时，判断复选框是否选择。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。js实现表单的复选框验证在网站，当我们进行一些表单提交，如注册等，底部都会有要求人们“接受条款和条件”或类似的内容。基本上是如果不同意（不选择），就无法提交表单。那么如何实现这样的功能？其实很简单，使用JavaScript 的vanilla，我们就可以阻止表单提交...

jquery如何判断checkbox（复选框）是否被选中?（源代码）

jquery如何判断checkbox（复选框）？相信有很多刚刚接触jquery的朋友都会有这样的疑问。本章就给大家介绍jquery如何判断checkbox（复选框）是否被选中。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。谁都知道在html如果一个复选框被选中是checked="checked"。但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked。所以很多朋友判断 if($("#id").attr("checked")=="true") 这个...

jQuery如何判断复选框是否勾选？有什么方法【图】

本篇文章给大家带来的内容是关于jQuery如何判断复选框是否勾选？有什么方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。这里实现的功能就是：复选框勾选时给input表单赋值，复选框取消时将表单值清除。实现源码：cyfID为复选框的id$("#cyfID").click(function(){ var ischeck=$(this).attr("checked"); if(ischeck==undefined){ //清除输入框 alert(""); }else{ //给输入框赋值 alert("qq"); } });实现原理...

js实现下拉复选框效果（代码实例）【图】

本章给大家带来用js实现下拉复选框效果（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。先看看效果：下面我们看看代码：HTML代码：<div><select name="" id="lang1"></select><ul id="ck1"><li><label><input type="checkbox">HTML</label></li><li><label><input type="checkbox">CSS</label></li><li><label><input type="checkbox">JavaScript</label></li><li><label><input type="checkbox">jQ...

jquery实现取消复选框后控件不可用，选中可用（代码）

本篇文章给大家带来的内容是关于jquery实现取消复选框后控件不可用，选中可用（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。标签内容<div class="box">请编写javascript代码，完成如下功能要求：<br />1.取消复选款后，要求促销价格、促销开始结束日期3个控件不可用。<br />2.选中复选框后，要求促销价格、促销开始结束日期3个控件可用。</div><div class="box"><table id="table1" class="mytable"><...

首页 / JAVASCRIPT / javascript-使用复选框更改行和列的字体颜色

javascript-使用复选框更改行和列的字体颜色

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript-使用复选框更改行和列的字体颜色】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

字体 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程