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>

Is it possible to get the parent and child of table row using each function of Jquery?

I have problem regarding inserting the parent and the child of each items.
I want to separately insert the parent and the child to the database. I will show you guys the pseudocode of my problem. and the below I give the jsfiddle, This is web app is like a WEB POS of a restaurant.
I design my web app like this, having a child item or it called as condiments.
Pseudocode:
Insert the Main item in table database A.
After the Main item already inserts in the database table A. In the inside of success function of Ajax. set the condition if this Main item has a Sub Item. if the Main item has a Sub Item get the last insert of the Main item and insert the Sub item in table B of the database. else if the Main item has no Sub Item, The Main item will insert only in table A.
Output should be on the database.
Ex.
Table A (Table for Main Item only)
Table B (Table for Sub Item)
$('button#add_to_cart').on('click', function() {
var customer_id = $('#hidden_customer_id').val();
var z = $('#noun_chaining_order').find('tr.condimentParent');
var x = $('#noun_chaining_order').find('tr.editCondiments').add(x).add(z).each(function() {
var $tds_menu = $(this).find("td");
Qty_menu = $tds_menu.eq(0).text(),
Item_menu = $tds_menu.eq(1).text(),
Price_menu = $tds_menu.eq(2).text();
console.log(this);
console.log(Item_menu);
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title></title>
</head>
<body>
<table class="table table-hover upsize_check" id="noun_chaining_order" style="border:none;">
<input type="hidden" name="" value="" id="hidden_customer_id">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Items</th>
<th scope="col">Price</th>
<th>Action</th>
</tr>
</thead>
<tbody style="font-size:14px;" id="tbody_noun_chaining_order">
<tr class="condimentParent">
<td></td>
<td>$5.00 Extra Crispy 2 Piece Box</td>
<td class="total">5.00</td>
<td><button class="removeorderWithCondi btn btn-danger form-control">Delete</button></td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">2</td>
<td>*Standard</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">Yes</td>
<td class="condi_section_id" style="display:none;">3</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">2</td>
<td>*Individual Fries</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">Yes</td>
<td class="condi_section_id" style="display:none;">2</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">1</td>
<td>*Buttery Bread</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">No</td>
<td class="condi_section_id" style="display:none;">4</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">1</td>
<td>*Chocolate Chip Cookie</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">No</td>
<td class="condi_section_id" style="display:none;">5</td>
</tr>
<tr class="editCondiments">
<td class="condiments_order_quantity">1</td>
<td>*355ml Pepsi</td>
<td class="total">0.00</td>
<td class="allow_to_open_condiments_conditional" style="display:none;">No</td>
<td class="condi_section_id" style="display:none;">6</td>
</tr>
</tbody>
</table>
<center>
<button type="button" class="btn btn-primary" style="background-color:#3D0081; border-color:#3D0081;" id="add_to_cart">Click to process the order</button>
</center>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

From what I understand - you want to use a database context in order to add the entities in your database?

Hiding table rows with checkbox [duplicate]

This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 6 years ago.
I'm trying to hide table rows when a tickbox is checked. I have managed to get it working, but it will only hide the first instance of the id. Could someone direct me in to changing the js so it will hide all with matching id.
JSFIDDLE
$(document).ready(function() {
$('#checkbox1').change(function() {
if (!this.checked)
$('#tierPoints').fadeIn('slow');
else
$('#tierPoints').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2>
<input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->
<tr id="tierPoints">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row -->
<tr id="tierPoints">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row -->
<tr id="tierPoints">
<td>75</td>
<td>3000</td>
</tr>
<!-- End Of Row -->
</table>

In HTML, an id has to be unique. See www.w3.org... for more details.
Try to change id="tiersPoints" to class="tiersPoints".

You need to use the "class" selector instead of ID Selector and the ID needs to be unique. You can have multiple elements with same Class Name.
$(document).ready(function() {
$('#checkbox1').change(function() {
if (!this.checked)
$('.tierPoints').fadeIn('slow');
else
$('.tierPoints').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2>
<input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>75</td>
<td>3000</td>
</tr>
<!-- End Of Row -->
</table>

You need to have unique ids. Use classes in this case:
$(document).ready(function() {
$('#checkbox1').change(function() {
if (!this.checked)
$('.tierPoints').fadeIn('slow');
else
$('.tierPoints').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2>
<input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>75</td>
<td>3000</td>
</tr>
<!-- End Of Row -->
</table>

An id should be distinct within your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2>
<input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->
<tr id="tierPoints1">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row -->
<tr id="tierPoints2">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row -->
<tr id="tierPoints3">
<td>75</td>
<td>3000</td>
</tr>
<!-- End Of Row -->
</table>

Here is solution:
As i mentioned in comment : You need to use tierPoints class. You cannot you multiple tr with same id
$(document).ready(function () {
$('#checkbox1').change(function () {
if (!this.checked)
$('.tierPoints').fadeIn('slow');
else
$('.tierPoints').fadeOut('slow');
});
});
input[type=checkbox]{padding:0; margin:0;}
td, th {
background: #ddd;
color: #000;
padding: 2px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2><input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td >75</td>
<td>3000</td>
</tr>
<!-- End Of Row -->
</table>

Try this. Change id by class. Id is unique by definition.
$(document).ready(function() {
$('#checkbox1').change(function() {
if (!this.checked)
$('.tierPoints').fadeIn('slow');
else
$('.tierPoints').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td colspan=2>
<input type="checkbox" id="checkbox1">Show/Hide</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>71</td>
<td>1000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>73</td>
<td>2000</td>
</tr>
<!-- End Of Row -->
<tr class="tierPoints">
<td>75</td>
<td>3000</td>
</tr>
<!-- End Of Row -->
</table>

How to hide the rows in Table when the value is empty?

We need to hide the row when the value is empty . but cant able to get the value of the empty column value and check it . Code used so far is
(function($) {
$('#event tr').each(function() {
if ($(this).find('.event:empty').length) $(this).remove();
});
})(jQuery);
Please see the below screenshot and marked cell is empty we need to hide the entire row
HTML Structure
<table class="tribe-events-calendar" id="event">
<thead>
<tr>
<th id="tribe-events-date" class="width-print" title="date" style="width:10%">date</th>
<th id="tribe-events-date" class="width-print" title="Weekday" style="width:10%">Weekday</th>
<th id="tribe-events-date" title="holiday name" style="width:20%">holiday name</th>
<th id="tribe-events-date" title="holiday type" style="width:60%">holiday type</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:15%">
<div id="tribe-events-daynum-2-0">
2 </div>
</td>
<!-- day -->
<td style="width:15%">
Mon</td>
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
some value
</td>
<!-- HOLIDAY Type-->
<td>
<p>National Holiday </p>
</td>
<!-- View More -->
</tr>
<tr>
<!-- Day Header -->
<td style="width:15%">
<div id="tribe-events-daynum-2-0">
2 </div>
</td>
<!-- day -->
<td style="width:15%">
Mon</td>
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
</td>
<!-- HOLIDAY Type-->
<td>
<p>National Holiday </p>
</td>
<!-- View More -->
</tr>
</tbody>
</table>

The td contains whitespace and it acts as textNode so :empty selector don't work here since which only select element which doesn't have any child nodes.
So check the text content and filter out td with whitespace or empty using filter() method.
// get all `tr` within the table except the header
// to avoid header tr use tbody in selector
$('#event tbody tr').filter(function() {
// get the event column, get text content,
// trim out text and check string is empty
// 0(length) is falsy value so use `!`
return !$('.event', this).text().trim().length;
// hide the filtered element
// if you would like to remove then use remove() method
}).hide();
$('#event tbody tr').filter(function() {
return !$('.event', this).text().trim();
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tribe-events-calendar" id="event">
<thead>
<tr>
<th id="tribe-events-date" class="width-print" title="date" style="width:10%">date</th>
<th id="tribe-events-date" class="width-print" title="Weekday" style="width:10%">Weekday</th>
<th id="tribe-events-date" title="holiday name" style="width:20%">holiday name</th>
<th id="tribe-events-date" title="holiday type" style="width:60%">holiday type</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:15%">
<div id="tribe-events-daynum-2-0">
2</div>
</td>
<!-- day -->
<td style="width:15%">
Mon</td>
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
some value
</td>
<!-- HOLIDAY Type-->
<td>
<p>National Holiday</p>
</td>
<!-- View More -->
</tr>
<tr>
<!-- Day Header -->
<td style="width:15%">
<div id="tribe-events-daynum-2-0">
2</div>
</td>
<!-- day -->
<td style="width:15%">
Mon</td>
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
</td>
<!-- HOLIDAY Type-->
<td>
<p>National Holiday</p>
</td>
<!-- View More -->
</tr>
</tbody>
</table>

If your element have white spaces or new line then :empty will not be very effective. You can check for the length of the html after trimming the spaces for the same logic.
(function($) {
$('#event tbody tr').each(function() {
if ($.trim($(this).find("td.event").html()) == "")
$(this).remove();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tribe-events-calendar" id="event">
<thead>
<tr>
<th id "tribe-events-date" class="width-print" title="date" style="width:10%">date</th>
<th id="tribe-events-date" class="width-print" title="Weekday" style="width:10%">Weekday</th>
<th id="tribe-events-date" title="holiday name" style="width:20%">holiday name</th>
<th id="tribe-events-date" title="holiday type" style="width:60%">holiday type</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:15%">
<div id="tribe-events-daynum-2-0">
2</div>
</td>
<!-- day -->
<td style="width:15%">
Mon</td>
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
some value
</td>
<!-- HOLIDAY Type-->
<td>
<p>National Holiday</p>
</td>
<!-- View More -->
</tr>
<tr>
<!-- Day Header -->
<td style="width:15%">
<div id="tribe-events-daynum-2-0">
2</div>
</td>
<!-- day -->
<td style="width:15%">
Mon</td>
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
</td>
<!-- HOLIDAY Type-->
<td>
<p>National Holiday</p>
</td>
<!-- View More -->
</tr>
</tbody>
</table>

Most likely empty isnt working because you have whitespace inside the td. Try
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event"></td>
instead of
<!-- HOLIDAY NAME -->
<td style="width:85%" class="event">
</td>

You can do this
$('#event tr').each(function() {
var td= $(this).find("td");
var _this=this;
$(td).each(function() {
var text = $(this).text();
if(text=='' || text==null|| typeof text=='undefined'){
$(_this).hide();
}
});
});

DataTables jquery plugin not working, get a blank page?

I am trying to implement the Datatables jquery plugin on with my html table but having no luck. I'm linking to the Datatables CDN for both the CSS styling and Datatables script itself, while linking to Google's hosted jquery plugin. I also have a local Javascript file with the script to initialize data tables on my table. I go to open the html page and just get my plain table as if DataTable isn't even functioning. What could I be doing wrong?
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables.js"></script>
<table id="mytable">
<table>
<thead>
<tr>
<th>High-Level Category</th>
<th>Device Type</th>
<th>Hostname</th>
<th>IP Address</th>
<th>Owner</th>
<th>Organizational Unit</th>
<th>Organizational Unit Email</th>
<th>Universal Forwarder or Syslog?</th>
<th>In PCI?</th>
<th>Notes</th>
</tr>
</thead>
<tbody contenteditable>
<tr>
<td contenteditable="true">SECDEV1</td>
<td contenteditable="true">Firewall</td>
<td contenteditable="true">Description 1</td>
<td contenteditable="true">1.1.1.1</td>
<td contenteditable="true">Kim</td>
<td contenteditable="true">Information Technology</td>
<td contenteditable="true">test#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">Yes</td>
<td contenteditable="true">notes</td>
</tr>
<tr>
<td contenteditable="true">SECDEV2</td>
<td contenteditable="true">Switch</td>
<td contenteditable="true">description2</td>
<td contenteditable="true">2.2.2.2</td>
<td contenteditable="true">Bob</td>
<td contenteditable="true">Information Networking</td>
<td contenteditable="true">test2#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">NO</td>
<td contenteditable="true">more notes</td>
</tr>
</tbody>
The local js file I have is as follows:
$(document).ready(function(){
$('#mytable').dataTable();
});
Any help would be great.
Thanks!

Your html code is incorrect. There was an extra open ending table tag. I corrected your html below:
<table id="mytable">
<thead>
<tr>
<th>High-Level Category</th>
<th>Device Type</th>
<th>Hostname</th>
<th>IP Address</th>
<th>Owner</th>
<th>Organizational Unit</th>
<th>Organizational Unit Email</th>
<th>Universal Forwarder or Syslog?</th>
<th>In PCI?</th>
<th>Notes</th>
</tr>
</thead>
<tbody contenteditable>
<tr>
<td contenteditable="true">SECDEV1</td>
<td contenteditable="true">Firewall</td>
<td contenteditable="true">Description 1</td>
<td contenteditable="true">1.1.1.1</td>
<td contenteditable="true">Kim</td>
<td contenteditable="true">Information Technology</td>
<td contenteditable="true">test#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">Yes</td>
<td contenteditable="true">notes</td>
</tr>
<tr>
<td contenteditable="true">SECDEV2</td>
<td contenteditable="true">Switch</td>
<td contenteditable="true">description2</td>
<td contenteditable="true">2.2.2.2</td>
<td contenteditable="true">Bob</td>
<td contenteditable="true">Information Networking</td>
<td contenteditable="true">test2#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">NO</td>
<td contenteditable="true">more notes</td>
</tr>
</tbody>
</table>

To achieve your expected result, use below CDN libraries
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Codepen- http://codepen.io/nagasai/pen/AXyLXO