Изменить фон другой таблицы, когда я выбрал текст из первой таблицы

Я делаю проект, в котором у меня проблемы с Jquery.

Описание: У меня есть две таблицы.

Первый: Выберите тип пользователя
секунда: Выбранные пользователи

Первая таблица имеет 3 типа пользователя, а вторая таблица имеет имя пользователя с типом пользователя.

Что я пытаюсь: В проекте Если я выбрал Тип пользователя: поставщик, то все пользователи второй таблицы, чей поставщик выбран, и меняют цвет фона на красный.

$(".RTtbl  .fa").click(function () {
           
            $(this).find(".fa").addClass(".bg-info");
           
        });

.RTtbl{
  background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
  background:red;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">
  <h5>
  Select User Type
  </h5>

  <table class = "table table-bordered RTtbl " style = "font-size:14px;">


                <tr>
                    <td style = "width:33.33%;">
                        <i class = " fa fa-user"</i>
                        User
                    </td>
                    <td style = "width:33.33%">
                         <i class = "fa fa-user-o" ></i>
                        Vendor
                    </td>
                    <td style = "width:33.33%">
                         <i class = "fa fa-user-circle-o" ></i>
                       Celeb
                    </td>

                </tr>
            </table>
              <h5>
  Selected Users
  </h5>
            <table class = "table table-bordered Fatbl">
            <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
            </table>

javascript jquery html css

07.06.2019 09:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

$(".menu").click(function () {
    var elem = $(this).find('.fa');
   //console.info($(this));
    $(".Fatbl").find('.fa').parent().removeClass("bg-info");
    $(".Fatbl").find(`.${elem.attr('class').split(" ")[1]}`).parent().addClass("bg-info");
   $('.menu').removeClass("bg-info");
   elem.parent().addClass("bg-info");        
});

.RTtbl{
  background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
  background:red;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">
  <h5>
  Select User Type
  </h5>
  <table class = "table table-bordered RTtbl" style = "font-size:14px;">
                <tr>
                    <td class = "menu" style = "width:33.33%;">
                        <i class = "fa fa-user"></i>
                        User
                    </td>
                    <td class = "menu" style = "width:33.33%">
                         <i class = "fa fa-user-o"></i>
                        Vendor
                    </td>
                    <td class = "menu" style = "width:33.33%">
                         <i class = "fa fa-user-circle-o"></i>
                       Celeb
                    </td>

                </tr>
            </table>
              <h5>
  Selected Users
  </h5>
            <table class = "table table-bordered Fatbl">
            <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
            </table>

При щелчке пользователя в первой таблице также выделяется тип пользователя второй таблицы.

— 07.06.2019 09:36

отредактировано соответственно, пожалуйста, проверьте, правильно это или нет.

— 07.06.2019 09:40

07.06.2019 09:31

Ответ принят как подходящий

Это код JQuery для достижения ответа:

$("#user").click(function(){
  $('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
  $('.fa-user').parent('td').addClass('bg-info');
});

$("#vendor").click(function(){
  $('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
  $('.fa-user-o').parent('td').addClass('bg-success');
})
$("#celeb").click(function(){
  $('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
  $('.fa-user-circle-o').parent('td').addClass('bg-warning');
})

.RTtbl{
  background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
  background:red;
}
.bg-success{
  background:green;
}
.bg-warning{
background:orange;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">
  <h5>
  Select User Type
  </h5>

  <table class = "table table-bordered RTtbl " style = "font-size:14px;">


                <tr>
                    <td id = "user" style = "width:33.33%;">
                        <i class = " fa fa-user"></i>
                        User
                    </td>
                    <td id = "vendor" style = "width:33.33%">
                         <i class = "fa fa-user-o" ></i>
                        Vendor
                    </td>
                    <td id = "celeb" style = "width:33.33%">
                         <i class = "fa fa-user-circle-o" ></i>
                       Celeb
                    </td>

                </tr>
            </table>
              <h5>
  Selected Users
  </h5>
            <table class = "table table-bordered Fatbl">
            <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
            </table>

предположим, если вам нужен один цвет для активного

$(".RTtbl td").click(function(){
  $('td').removeClass('bg-info');
  var clName = $(this).children('i').attr('class');
  clName = clName.split(' ');
  $('.'+clName[1]+'').parent('td').addClass('bg-info');
  $('.'+clName[1]+'').parent('td').siblings('td').addClass('bg-info');
  $(this).siblings().removeClass('bg-info');
});

.RTtbl{
  background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
  background:red;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">
  <h5>
  Select User Type
  </h5>

  <table class = "table table-bordered RTtbl " style = "font-size:14px;">


                <tr>
                    <td id = "user" style = "width:33.33%;">
                        <i class = "fa fa-user"></i>
                        User
                    </td>
                    <td id = "vendor" style = "width:33.33%">
                         <i class = "fa fa-user-o" ></i>
                        Vendor
                    </td>
                    <td id = "celeb" style = "width:33.33%">
                         <i class = "fa fa-user-circle-o" ></i>
                       Celeb
                    </td>

                </tr>
            </table>
              <h5>
  Selected Users
  </h5>
            <table class = "table table-bordered Fatbl">
            <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
             <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
              <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
              <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
                      <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
                      <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-circle-o" ></i>
                      Kisan </td>
                      <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user" ></i>
                      Kisan </td>
                      <td> 
                      Kisan </td>
            </tr>
             <tr>
              <td> <i class = "fa fa-user-o" ></i>
                      Kisan </td>
                      <td> 
                      Kisan </td>
            </tr>
            </table>

Спасибо, у меня есть <tr> <td></td> <td> </td> <td> </td> </tr>. Если я хочу добавить цвет фона в TR, мой Jquery будет........

— 07.06.2019 11:54

@Pritesh проверьте второй фрагмент обновленного ответа

— 07.06.2019 12:02

07.06.2019 09:38

Я считаю, что это то, что вы хотите сделать: http://jsfiddle.net/mer29tsv/16/

Пожалуйста, дайте мне знать, соответствует ли результат ожидаемому. Когда вы используете $(this).find(), вы находите в ячейке первой таблицы и применяете к ней класс.

Вам нужно применить его ко второй таблице, используя соответствующее имя класса. Кроме того, использование атрибутов данных было бы лучше для подключения верхней таблицы к нижней таблице, код, который я приложил, будет работать только в том случае, если имя класса значка имеет определенный формат.

Мне пришлось изменить имя класса bg-info, потому что оно уже где-то объявлено, что дает синий цвет фона.

07.06.2019 09:38

// you need to click the tabel cell, not the icon
$(".RTtbl td").click(function() {
  
  // Get the icon class
  let cls = $(this).find('i').attr('class');
  
  // Reset selection
  $(this).siblings().removeClass('bg-info');
  $(`.Fatbl i`).parent().removeClass('bg-info');
  
  // Select the cells accordingly
  // Do not write ".bg-info" because it's for query onlyu
  $(this).addClass('bg-info');
  $(`.Fatbl i[class = "${cls}"]`).parent().addClass('bg-info');
});

.RTtbl {
  background: #fcffe5;
}

td {
  cursor: pointer;
}

/* bg-info is a built-in bootstrap class, not recommended to change it */
/*
.bg-info {
  background: red;
}
*/

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">
<h5>
  Select User Type
</h5>

<table class = "table table-bordered RTtbl " style = "font-size:14px;">


  <tr>
    <td style = "width:33.33%;">
      <i class = "fa fa-user" </i> User
    </td>
    <td style = "width:33.33%">
      <i class = "fa fa-user-o"></i> Vendor
    </td>
    <td style = "width:33.33%">
      <i class = "fa fa-user-circle-o"></i> Celeb
    </td>

  </tr>
</table>
<h5>
  Selected Users
</h5>
<table class = "table table-bordered Fatbl">
  <tr>
    <td> <i class = "fa fa-user-circle-o"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user-o"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user-circle-o"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user-o"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user-circle-o"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user"></i> Kisan </td>
  </tr>
  <tr>
    <td> <i class = "fa fa-user-o"></i> Kisan </td>
  </tr>
</table>

07.06.2019 09:48

Другие вопросы по теме

Как установить содержимое Div с данными JSON

Все правила проверки jquery работают правильно (работают на клавиатуре), но только подтверждают, что проверка пароля работает только после нажатия кнопки отправки

Хотите получить раскрывающееся значение в запросе php sql без обновления страницы

Добавить фоновые изображения в раскрывающийся список в опции

Select 2 не работает после добавления через jQuery

Дублирование запросов после обновления Chrome до версии 75.0.3770.80 (официальная сборка) (64-разрядная версия) и двойное сохранение данных в базе данных

Jquery — таблица Rowspan в PHP

R Shiny — Использование селекторов JQuery в Shinyjs::toggleState для отключения динамически создаваемых кнопок

Найдите элемент HTML с помощью jQuery, используя эффективный стиль (стиль, унаследованный от класса CSS, а не явный для элемента)

Могу ли я перезагрузить несколько div с помощью jQuery?

Изменить фон другой таблицы, когда я выбрал текст из первой таблицы

Ответы 4

Другие вопросы по теме

Похожие вопросы