Изменение цвета шрифта строк и столбцов с помощью флажков
Я ищу способ изменить цвета шрифта содержимого строки и столбца таблицы с установленным флажком вверху и в левой части таблицы. поэтому, когда установлен флажок, содержимое соответствующей строки или столбца меняет цвет шрифта. Мне не нужны несколько цветов. Мне просто нужно изменить цвет шрифта только на назначенный цвет. Флажки для нескольких строк и столбцов можно щелкнуть вместе, это не должно вызывать затруднений. Спасибо за помощь!
Вот также 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>Спасибо, Себастьян. Я поменял "id".
—
28.04.2018 15:48
Поэтому добавьте класс в строку, если он отмечен.
—
28.04.2018 16:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
3
84
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
Ответ принят как подходящий
Вы можете сделать что-то вроде:
//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>Большое спасибо, Эдди. Это потрясающе. То, что я искал.
—
28.04.2018 16:10
Рад помочь :)
—
28.04.2018 16:11
Просто хочу сказать, что я поигрался с вашим кодом и добавил новый ответ. Я говорю вам, потому что вы, возможно, захотите рассмотреть некоторые из методов, которые я использовал. :) Пожалуйста, не воспринимайте это как нападение!…
—
28.04.2018 19:01
@TakitIsy Спасибо, что сообщили мне, я рассмотрел ваш код и думаю, что буду придерживаться своего :) Вы добавили класс на <tr> и на <td>, что делает его несовместимым. Не совсем мое. Спасибо, что сообщили мне :)
—
28.04.2018 19:16
@Eddie: Конечно, но мне показалось забавным иметь возможность стилизовать перекрестки. В любом случае будет легко стилизовать все tds вместо tr. Я обнаружил, что ваша инструкция $(this).parent().parent().addClass('selected').siblings().addClass('selected'); слишком сложна. Это было в основном из-за этого, чем я хотел улучшить ваш ответ! ;)
—
28.04.2018 19:24
Действительно? Это смешно? Это сложно? Думаю, мы не сходимся во взглядах с этими вещами :) И ты это делаешь не в первый раз. Вы просто усиливаете ответ людей. Я имею в виду, что в этом нет ничего плохого, но если вы так много делаете, давай сейчас :)
—
28.04.2018 19:30
Я должен повторить себя, но… Это не было нападением. Я обнаружил, что $(this).closest('tr').addClass('selected'); легче писать и понимать, чем $(this).parent().parent().addClass('selected').siblings().addClass('selected');. Но может я просто сумасшедший. В любом случае, в теме, которую вы связали, вы могли признать, что на самом деле было слишком много открывающих и закрывающих тегов php! Я подумал, что объяснять, как можно этого избежать, было здравым смыслом. Теперь мне кажется, что вы говорите: «Я буду придерживаться своего [кода]», потому что вы плохо восприняли мой комментарий.
—
28.04.2018 19:41
Как я уже сказал, добавление класса в <tr> и <td> для меня несовместимо. И не мое. И мой ответ на мой пост основан на исходном сообщении OP, а не на проблеме :)
—
28.04.2018 19:44
О нет, я не чувствовал себя плохо. Я буду придерживаться своего кода, потому что это последовательный с добавлением класса цвета на <td>. :)
—
28.04.2018 19:47
Я не уверен, было ли это то, что вам нужно. Вот рабочий пример.
<table class = "tb">
<tbody>
<tr>
<td></td>
<td>
<label class = "color-switch">
<input data-col = "0" type = "checkbox" /> Switch</label>
</td>
<td>
<label class = "color-switch">
<input data-col = "1" type = "checkbox" /> Switch</label>
</td>
</tr>
<tr>
<td>
<label class = "color-switch">
<input type = "checkbox" data-row = "0" /> Switch</label>
</td>
<td data-row = "0" data-col = "0">Text</td>
<td data-row = "0" data-col = "1">Text</td>
</tr>
<tr>
<td>
<label class = "color-switch">
<input type = "checkbox" data-row = "1" /> Switch</label>
</td>
<td data-row = "1" data-col = "0">Text</td>
<td data-row = "1" data-col = "1">Text</td>
</tr>
</tbody>
</table>
<style type = "text/css">
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.nochange,
tr {
background-color: white;
}
td.row-checked.col-checked{
color: red;
}
</style>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<script type = "text/javascript">
var $inputCheckboxRow = $('input[type = "checkbox"][data-row]');
var $inputCheckboxCol = $('input[type = "checkbox"][data-col]');
$inputCheckboxRow.on('change', onInputCheckBoxRowChange );
$inputCheckboxCol.on('change', onInputCheckboxColChange );
function onInputCheckBoxRowChange(){
let row = $(this).data('row');
if ($(this).is(':checked')){
$('td[data-row='+ row +']').addClass('row-checked')
}else{
$('td[data-row='+ row +']').removeClass('row-checked')
}
}
function onInputCheckboxColChange(){
let col = $(this).data('col');
if ($(this).is(':checked')){
$('td[data-col='+ col +']').addClass('col-checked')
}else{
$('td[data-col='+ col +']').removeClass('col-checked')
}
}
</script>
Спасибо, Никксан. Я попробовал на скрипке. но, похоже, это не совсем то, что я хотел. Я получил ответ сейчас. спасибо за ваше время и помощь.
—
28.04.2018 16:12
Я сделаю это следующим образом:
var color = "red";
$('input[type=checkbox]').click(function(){
var id = $(this).attr('id');
var isChecked = $(this).prop('checked');
var idNum = $(this).attr('id').replace('check','');
if (idNum > 7){
if (isChecked)
$(this).closest('td').siblings().css('color', color);
else
$(this).closest('td').siblings().css('color', '');
}
else if (idNum < 23){
$(this).closest('tr').siblings().each(function(i, tr){
if (isChecked)
$(this).find('td:eq("'+idNum+'")').css('color', color);
else
$(this).find('td:eq("'+idNum+'")').css('color', '');
});
}
}).tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.nochange,
tr {
background-color: white;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>Большое спасибо, Мамун.
—
28.04.2018 18:17
Я знаю, что вы уже приняли ответ Эдди, но все равно вот он. Пытаясь улучшить его ответ, вот отрывок, показывающий, что я буду делать. Пожалуйста, уделите время рассмотрению методов, используемых в javascript, это единственное, что я изменил по сравнению с кодом Эдди. Я добавил комментарии, чтобы было понятнее.
Плюс я добавил кое-что забавное в CSS!
// Listen to checkboxes change on table
$('.tb input[type = "checkbox"]').change(function() {
// Remove the class on all trs and tds
$('.tb tr, .tb td').removeClass('selected');
// Add the class only to checked trs (rows)
// Note that there is no need to use the .find() method
// You can just move the whole selection string in the $() query
$('.tb tr>td:first-child input[type = "checkbox"]:checked').each(function() {
// closest() is a really nice method, consider it! Way clearer than .parent().parent()…
$(this).closest('tr').addClass('selected');
})
// Add the class only to checked tds (columns)
var tds = $('.tb tr:first-child td');
$('.tb tr:first-child input[type = "checkbox"]:checked').closest('td').each(function() {
// The each only contains selected tds, not all of them
// Get index for each of the selecteds (+1 because index starts at 0) and style them!
$('.tb tr>td:nth-child(' + (tds.index($(this)) + 1) + ')').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;
}
/* The funny thing is that we could stylize intersections */
.selected .selected {
color: blue;
}<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>Подробнее о .closest(): https://api.jquery.com/closest/
Подробнее о .index(): https://api.jquery.com/index/
Я надеюсь, что это помогает.
Большое спасибо, Такит Иси.
—
28.04.2018 19:52
@Max Я рада, что оно тебе пригодилось!
—
28.04.2018 19:57
Другие вопросы по теме
JQuery в чистый ванильный JS
Как предотвратить направление прокрутки?
Leaflet JS с циклом в JavaScript
Установка src в кодировке base64 в плагин jquery
Проблема с CSS или JS в Internet Explorer, из-за которой предварительный загрузчик не работает, а карусель совы не работает
Выберите из таблицы с группой, где дата> дата в таблице mysql
После добавления товара «добавить в корзину» не работает
Проблема с загрузкой изображения ckeditor5
Как предотвратить SQL-инъекцию при использовании JQuery Query Builder
Как инициализировать добавленный класс в javascript?
Похожие вопросы
Как я могу проверить, существует ли значение на карте в Javascript?
Динамически добавленная функция работает некорректно JavaScript
JQuery в чистый ванильный JS
Разделите массивы и выполните цикл для публикации в конечную точку веб-перехватчика
Javascript для поиска позиции значения данной переменной в одном массиве в другом массиве
Как предотвратить направление прокрутки?
Почему он равен True и, таким образом, отображает div в React?
Leaflet JS с циклом в JavaScript
Каковы хорошие варианты использования событий, отправленных сервером
Как заливать цветом конкретную область?
Ваш HTML недействителен: у вас есть неуникальные идентификаторы, идентификатор "check" используется для каждого флажка.