Develop Reference

I have a table and if A2> A1 in the table, I want to set the row to red color

I have a table and I want to compare it to the table.
If A2 > A1, I want to set the row to red color.
I can access data with Each command, but I have difficulty in the class to assign.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr id="satir">
<td>A1</td>
<td id="envanter" class="">
<center>44</center>
</td>
<td id="kritikStok" class="">
<center>45</center>
</td>
</tr>
<tr id="satir">
<td>A2</td>
<td id="envanter" class="">
<center>50</center>
</td>
<td id="kritikStok" class="">
<center>10</center>
</td>
</tr>
<tr id="satir">
<td>A3</td>
<td id="envanter" class="">
<center>26</center>
</td>
<td id="kritikStok" class="">
<center>27</center>
</td>
</tr>
<tr id="satir">
<td>A4</td>
<td id="envanter" class="">
<center>40</center>
</td>
<td id="kritikStok" class="">
<center>39</center>
</td>
</tr>
</tbody>
</table>

You can use .each loop to iterate through your tbody trs then use .find("td:eq(1) center") to get value of td from 2nd column and .find("td:eq(2) center") to get value from 3rd column then compare both and add class depending on this .
Demo Code :
//loop through tr
$("#arsivTablosu tr").each(function() {
//check the value of 2 & 3 td
parseInt($(this).find("td:eq(2) center").text()) > parseInt($(this).find("td:eq(1) center").text()) ? $(this).addClass("red_color") : ""
})
.red_color {
background-color: 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr>
<td>A1</td>
<td>
<center>44</center>
</td>
<td>
<center>45</center>
</td>
</tr>
<tr>
<td>A2</td>
<td>
<center>50</center>
</td>
<td>
<center>10</center>
</td>
</tr>
<tr>
<td>A3</td>
<td>
<center>26</center>
</td>
<td>
<center>27</center>
</td>
</tr>
<tr>
<td>A4</td>
<td>
<center>40</center>
</td>
<td>
<center>39</center>
</td>
</tr>
</tbody>
</table>

My table filter with javascript is not working

I'm doing a project on intellij with springboot and i have a dynamic table. I put a search box and add a script that in theory it has work but it doesn't.
This is my table with the input box:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" >
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> show </td>
<td> add prescription </td>
</tr>
</tbody>
This is the script:
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
These are the libraries that i imported in the head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Can someone please help me to understand what i did wrong?

your table id is wrong in your script, try this:
$(document).ready(function(){
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function() {
if($(this).text().toLowerCase().indexOf(value) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
<input type="text" id="myInput" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" >
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> show </td>
<td> add prescription </td>
</tr>
</tbody>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Table cells unintentionally change size after a click event

I am dynamically building a table using JS but, for some reason, after clicking on the btn_dropdown0 "button", which is supposed to hide and show the tbody, the button itself gets slightly moved left and right. The reason for this, after inspecting my code behavior, is that the two blank th are resizing, probably due to the fact that when the tbody is visibile, the cells on the row below contain some data and so they get stretched.
This is my table replicated and the jQuery handling the effects:
$('#btn_dropdown0').click(function() {
if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){
$(this).css({'transform': ''});
$('#tbody0').hide();
}else{
$(this).css({'transform': 'rotate(180deg)'});
$('#tbody0').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-hover text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Bangkok</th>
<th scope="col">Milan</th>
<th scope="col">Flight type: international</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th>
</tr>
</thead>
<tbody id="tbody0" style="display: none;">
<tr>
<td>Monday</td>
<td>15:00</td>
<td>16:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
<tr>
<td>Tuesday</td>
<td>22:00</td>
<td>23:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
</tbody>
</table>

Add width to th, it will remain in same position. As there is no width to th so it is taking according to content size in it. Now when you click it is flickering due to scrollbar. Check it in full page mode.
$('#btn_dropdown0').click(function() {
if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){
$(this).css({'transform': ''});
$('#tbody0').hide();
}else{
$(this).css({'transform': 'rotate(180deg)'});
$('#tbody0').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-hover text-center">
<thead class="thead-dark">
<tr>
<th scope="col" width="15%">Bangkok</th>
<th scope="col" width="15%">Milan</th>
<th scope="col" width="45%">Flight type: international</th>
<th scope="col" width="10%"></th>
<th scope="col" width="10%"></th>
<th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th>
</tr>
</thead>
<tbody id="tbody0" style="display: none;">
<tr>
<td>Monday</td>
<td>15:00</td>
<td>16:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
<tr>
<td>Tuesday</td>
<td>22:00</td>
<td>23:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
</tbody>
</table>

Bootstrap tooltip pushed my right side contents away

I added tooltip in my table's 2nd column but it is pushiing my last column away.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

You can just add data-container="body" in your HTML in this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
or can add {container: 'body'} to your JavaScript in this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
EDIT:
If you want your tooltip to be on text instead of td you can create an inner element like span and add tooltip on that item. Try this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>
<span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</span>
</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>
<span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</span></td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
just add data-container="body"
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>

try this way :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</p></td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</p></td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

edit <tbody> like
<tbody>
<tr data-toggle="tooltip">
<td>Default</td>
<td data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success" data-toggle="tooltip">
<td>Success</td>
<td data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
this. put data-toggle="tooltip" into <tr> tag

Disable row hide/show when click on the checkbox

Combine with datatables, I'm using the following code to hide/show more details and it applies at the row level instead of the first column (and I want it this way). At the same time I also have the checkbox in one of the column.
The problem is when I click on the checkbox, it will show/hide the entire row.
How to allow me to click on the checkbox without trigger the hide/show?
$(document).ready(function() {
$('#myTable').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [{
className: 'control',
targets: 0,
orderable: false
}],
searching: false
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Company</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>
<style>
.big-checkbox {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="table-responsive">
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th>ID</th>
<th>Company</th>
<th>Invoice No.</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Outstanding Amount</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>1</td>
<td>ABC Company</td>
<td>C1010</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>PENDING</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>2</td>
<td>Zoozle Inc</td>
<td>C0432</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>Completed</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
</body>
</html>

try now
you need bind click event for checkbox and need to use stopPropagation(); to prevent click event that is passing to its parent.
$(document).ready(function() {
$("input[type='checkbox']").click(function(e){
debugger;
e.stopPropagation();
});
$('#myTable').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [{
className: 'control',
targets: 0,
orderable: false
}],
searching: false
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Company</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>
<style>
.big-checkbox {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="table-responsive">
<table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th>ID</th>
<th>Company</th>
<th>Invoice No.</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Outstanding Amount</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>1</td>
<td>ABC Company</td>
<td>C1010</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>PENDING</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" class="big-checkbox"></td>
<td>2</td>
<td>Zoozle Inc</td>
<td>C0432</td>
<td>2017-09-27 00:00:00</td>
<td>111</td>
<td>28</td>
<td>Completed</td>
<td>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
</body>
</html>

The issue is that the responsive extension attachs four event handlers to <tbody> each time the table is drawn.
Thus a handler to override responsive must be regenerated after each draw as well :
drawCallback: function() {
$('#example tbody td').on('keyup mouseup mousedown click', function(e) {
if (e.target.type == 'checkbox') {
e.stopPropagation()
}
})
},
demo -> http://jsfiddle.net/eyLne5e7/