Menu
I am making the project, in which I am trouble in Jquery.
Description: I have two tables.
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>
318
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
