Change background of another table when I selected text from first table

user_11591828 0
Viewed 81

I am making the project, in which I am trouble in Jquery.

Description: I have two tables.

  • First: Select User Type
  • second: Selected Users

The first table has 3 user type and the Second table have a User name with user Type.

What I try: In Project If I selected User type: vendor, then all the user of table second whose Vendor is select and change background color to red. 

$(".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>

css html jquery javascript
4 Answers

$(".menu").click(function () {
    var elem = $(this).find('.fa');
   //console.log($(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>

user_47516870

This is JQuery code to achieve Answer:

$("#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>

suppose if you want single color for active

$(".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>

user_61088820

I believe this is what you want to do: http://jsfiddle.net/mer29tsv/16/

Please let me know if the output is as expected. When you use $(this).find() you are finding in the cell of the first table, and applying the class to it.

You need to apply it to the second table by using the appropriate className. Also, using data-attributes would be better to connect the upper table to the lower table, the code I have attached will only work if the icon className is in a specific format.

I had to change the bg-info class name because it's already declared somewhere which is giving a background color of blue.

user_115921370 

// 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>

user_102892650
Related