Develop Reference

Highlighting HTML table cells depending on value (jQuery)

There is a table that will populate depending on the selected dropdown element. Here is the code (I didn’t insert a line with dropdown elements):
<table id="myPlaneTable" class="table table-bordered">
<tr>
<td style="width: 20%">Max speed</td>
<td style="width: 15%">450</td>
<td style="width: 15%">487</td>
<td style="width: 15%">450</td>
<td style="width: 15%">600</td>
</tr>
<tr>
<td style="width: 20%">Max speed</td>
<td style="width: 15%">580</td>
<td style="width: 15%">490</td>
<td style="width: 15%">543</td>
<td style="width: 15%">742</td>
</tr>
</table
Here's what it looks like
Since I was just starting to learn jQuery, I tried the following code, but it does not work
$("#myPlaneTable tbody tr.data-in-table").each(function () {
$(this).find('td').each(function (index) {
var currentCell = $(this);
var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null;
if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) {
currentCell.css('backgroundColor', 'red');
nextCell.css('backgroundColor', 'green');
}
});
});
The result I'm trying to get
Highlighting if only the best and worst value (not between)
If the data matches in several cells, it is necessary to highlight them too
If there is no data, the cell should be without highlighting
Data should be compared within one <tr>, since there will be several lines

You can store all the values of each row in an array.
Then, store the minimum and maximum values, and finally apply the color to each <td> if the value match.
$("#myPlaneTable tbody tr").each(function () {
var values = [];
var tds = $(this).find('td');
tds.each(function () {
if ($.isNumeric($(this).text())) {
values.push($(this).text());
}
});
var min = Math.min.apply(Math, values);
var max = Math.max.apply(Math, values);
tds.each(function () {
if ($(this).text() == min) {
$(this).css('backgroundColor', 'red');
}
if ($(this).text() == max) {
$(this).css('backgroundColor', 'green');
}
});
});

you have to loop through all Table Rows and Table cells, throw them together in an array and compare the numbers then for the lowest and highest.
I will give you 2 Solutions for the styling, first one (better choice) via seperate css file styling, second one via inline jQuery Styling.
Here is an working example how it can be solved:
https://jsfiddle.net/efmkr08t/1/
$('#myPlaneTable').find('tr').not(':first').each(function(index, tr) {
var cols = [];
$(tr).find('td').not(':first').each(function(index, td) {
if ($(td).text() === '') {
return;
}
cols[index] = Number($(td).text());
});
var max = Math.max.apply(null, cols);
var min = Math.min.apply(null, cols);
$(tr).find('td').not(':first').each(function(index, td) {
if (Number($(td).text()) === min) {
// the way you should use it (styling is via css)
$(td).addClass('min')
// inline css
// $(td).css('background', 'red');
}
if (Number($(td).text()) === max) {
// the way you should use it (styling is via css)
$(td).addClass('max')
// inline css
// $(td).css('background', 'green');
}
});
});

Here I'm using jQuery map and toggleClass()
$(function(){
$('#myPlaneTable tr').each(function(index, tr) {
max = Math.max.apply(Math,$('td:not(:first)', tr).map(function(index, td) {
return parseInt($(td).text());
}));
min = Math.min.apply(Math,$('td:not(:first)', tr).map(function(index, td) {
return parseInt($(td).text());
}));
$(this).find('td').each( function(){
$(this).toggleClass('best',parseInt($(this).text())==max).toggleClass('worst', parseInt($(this).text())==min)
});
});
});
.best{
background-color:green;
}
.worst{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myPlaneTable" class="table table-bordered">
<tr>
<td style="width: 20%">Max speed</td>
<td style="width: 15%">450</td>
<td style="width: 15%">487</td>
<td style="width: 15%">450</td>
<td style="width: 15%">600</td>
</tr>
<tr>
<td style="width: 20%">Max speed</td>
<td style="width: 15%">580</td>
<td style="width: 15%">490</td>
<td style="width: 15%">543</td>
<td style="width: 15%">742</td>
</tr>
</table>

JQuery/JavaScript - Perform calculations on 2 cells in each row and return results to 3rd cell in each row

I am attempting to do some calculations on two cells in each row (each has a unique class) and return the results to a third cell (has its own class as well). I have put each class into its own array and I am able to access the elements within. I am not entirely sure I am evening approaching this the right way, any help would be much appreciated. The math is (sub1 - sub2) / sub2
Here is my JSFiddle and here is my html for my table:
var sub1 = [];
var sub2 = [];
var sub3 = [];
$(function subP() {
$('.sub1').each(function(i, e) {
sub1.push($(e).text());
});
$('.sub2').each(function(i, e) {
sub2.push($(e).text());
});
$('.sub3').each(function(i, e) {
sub3.push($(e).text());
});
var x = (sub1[0] - sub2[0]) / sub2[0];
$('.sub3:first').html(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<th>test0</th>
<th>test1</th>
<th>test2</th>
<tr>
<td class="sub1">1</td>
<td class="sub2">2</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">3</td>
<td class="sub2">4</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">5</td>
<td class="sub2">6</td>
<td class="sub3">0</td>
</tr>
</tbody>
</table>

You haven't loaded the jQuery library in your fiddle. That's why your code doesn't work, otherwise your code does something. It gets the result of calculation and sets it to all .sub3 elements.
This is one way of getting the expected result.
$('.sub3').text(function() {
var $this = $(this);
var sub1 = +$this.siblings('.sub1').text();
var sub2 = +$this.siblings('.sub2').text();
return ((sub1 - sub2) / sub2).toFixed(2);
});

Here's a way to do it
var sub1 = [];
var sub2 = [];
var sub3 = [];
$(function subP() {
$('.sub1').each(function(i, e) {
sub1.push($(e).text());
});
$('.sub2').each(function(i, e) {
sub2.push($(e).text());
});
$('.sub3').each(function(i, e) {
var x = (sub1[i] - sub2[i]) / sub2[i];
$(this).html(x);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<th>test0</th>
<th>test1</th>
<th>test2</th>
<tr>
<td class="sub1">1</td>
<td class="sub2">2</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">3</td>
<td class="sub2">4</td>
<td class="sub3">0</td>
</tr>
<tr>
<td class="sub1">5</td>
<td class="sub2">6</td>
<td class="sub3">0</td>
</tr>
</tbody>
</table>

how to assign random values from array to table cell on a button click

I want to implement the code to create a bingo appliacation where it takes the letters from array on a button click.
How can i assign the array element like array(a,b,c) to those 3X3 table cells randomly on run button click. when i got sequence like abc in a row or diagonal i want increment the count value.
I started but i am unable to implement the code. Can i get any suggestion please.
Here is my code
<html>
<head>
<script>
function run(){
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = rand();
row.cells[1].textContent = rand();
row.cells[2].textContent = rand();
}
score()
}
function rand(){
var text = new Array();
var possible = "MCS*";
return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
Thanks in advance..

<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){
var counter =0;
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = arr_num[getRandom()];
row.cells[1].textContent = arr_num[getRandom()];
row.cells[2].textContent = arr_num[getRandom()];
}
var a = getMatch();
for(var i=0;i<getMatch().length; i++){
if(match.indexOf(a[i]) > -1)
counter++;
}
document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
var grid = document.getElementById("grid");
var match1 = [[]];
var match_dia =[];
var temp_dia1 = 0;
var temp_dia2 = 2;
var temp_dia3 = 0;
var temp_dia4 = 2;
var match_col = [];
for (var i = 0, row; row = grid.rows[i]; i++){
match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
if(match_col.length != 0){
match_col[0] = match_col[0]+row.cells[0].textContent;
match_col[1] = match_col[1]+row.cells[1].textContent;
match_col[2] = match_col[2]+row.cells[2].textContent;
match_col[3] = row.cells[0].textContent+match_col[3];
match_col[4] = row.cells[1].textContent+match_col[4];
match_col[5] = row.cells[2].textContent+match_col[5];
}else{
match_col[0] = row.cells[0].textContent;
match_col[1] = row.cells[1].textContent;
match_col[2] = row.cells[2].textContent;
match_col[3] = row.cells[0].textContent;
match_col[4] = row.cells[1].textContent;
match_col[5] = row.cells[2].textContent;
}
if(match_dia.length != 0){
match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
}else{
match_dia[0] = row.cells[temp_dia1++].textContent;
match_dia[1] = row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent;
match_dia[3] = row.cells[temp_dia4--].textContent;
}
}
for(var i=0;i<match_col.length;i++){
match1[match1.length++] = match_col[i];
}
match1[match1.length++] = match_dia[0];
match1[match1.length++] = match_dia[1];
return match1;
}
function getRandom(){
return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>

This is how you would assign a value to each cell:
for(var row = 1; row <= 3; row++) {
for(var col = 1; col <= 3; col++ {
var id = '#'+ row + "-" + col;
$(id).html(/* put some content here */);
}
}
To assign a random number see Math.random(). If you multiply that value with 10 and round it down, you will get an integer between 0 and 9. Use that value to pick an element from your array.
Edit
So if you have an array like letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ]and a random number n then letters[n] will give you the array element with index n. For n == 2: letters[n] == "CD"

Well this is NOT bingo but your "assign random letter a,b,c to a space in a grid" can be satisfied by:
var bingocol = ["a", "b", "c"];
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$('#runbingo').on("click", function() {
var nextcolindex = getRandomIntInclusive(0, 2);
var nextletterindex = getRandomIntInclusive(0, 2);
var nextrow = getRandomIntInclusive(0, 2);
$('#grid').find('tr').eq(nextrow).find('td').eq(nextcolindex).html(bingocol[nextletterindex]);
});
NOW if you really want to emulate BINGO where the column varies and the NUMBERS in the column vary by a given sequence that is a different problem; note that you would then need to have one algorithm to assign the player cards and another to pick random values from a list for the "game" card both of which would need to consider the range and previously filled values to exclude duplicates - doable but an entirely different problem.
Here is the code above in action: https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/

automatically multiply two values to give a total jquery

I have a jQuery question an was wondering if anyone could help me out.
I have an html table with information in it specifically for stones. I have a price per carat and a price per stone at the end of the table. I wish to have the price per carat multiply by the weight to give the price per stone. I also have a markup box that i have created in which the user inputs a number which is then regarded as a % and is automatically added to the price per carat and price per stone. here is what i have so far:
Here is the jquery
jQuery(document).ready(function () {
jQuery("#markup").keyup(multInputs);
function multInputs() {
var $inmult = jQuery(this).val();
jQuery("tr").each(function () {
var $val1 = jQuery('.price .amount', this).text().substring(1);
var $mult = $inmult / 100;
$mult += 1;
var $total = $val1 * $mult;
jQuery('.adjprice .amount', this).text("$" + $total.toFixed(2));
$val1 = jQuery('.org_ct', this).text();
$mult = $inmult / 100;
$mult += 1;
$total = $val1 * $mult;
jQuery('.adj_ct', this).text($total.toFixed(2));
});
}
});
Here is the HTML
<span class="markup">Adjust Price: <input name="markup" id="markup"> % </span>
<table id="myTable" class="tablesorter-blackice">
<thead>
<tr>
<th>Sku#</th>
<th>Availability</th>
<th>Cert #</th>
<th>Shape</th>
<th>Weight</th>
<th>Colour</th>
<th>Clarity</th>
<th>Cut</th>
<th>[MM]</th>
<th style="display:none" class="header">US$/ct</th>
<th class="header">US$/ct</th>
<!--<th>CDN$/ct</th>-->
<th style="display:none" class="header">Hidden Orig Price</th>
<th class="header">US$/St</th>
</tr>
</thead>
<tbody>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>wrer</td>
<td>ewrer</td>
<td>erwer</td>
<td>ere</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct" style="display:none">
<td class="adj_ct">1234</td>
</td>
<td class="price" style="display:none">
<td class="adjprice">
<span class="amount"></span>
</td>
</td>
</tr>
</tbody>
</table>
The number is not automatically being multiplied to give me a price per stone. also the markup is not working either I really appreciate the help. THANKS!

If I understand your question correctly, this should do what you need. Note that I un-hid some of the columns to make it easier to work with, you'll need to hide them again.
jQuery(document).ready(function () {
function iDoMathsGood() {
$('.amount').map(function () {
// get all of the elements we'll need to manipulate
var row = $(this).parent().parent();
var originalTtl = row.find('.price');
var adjusted = row.find('.adj_ct');
// get the numbers we'll need and do some math
var cts = Number(row.find('.weight').html());
var origPPCT = Number(row.find('.org_ct').html()) * 1000;
var markupPrct = Number($('#markup').val()) / 100;
var markedupCost = (origPPCT * markupPrct) + origPPCT;
// do a little more math them set the results
adjusted.html((markedupCost / 1000).toFixed(2));
originalTtl.html(((origPPCT * cts) / 1000).toFixed(2));
return $(this).html(((markedupCost * cts) / 1000).toFixed(2));
});
}
iDoMathsGood();
$('#markup').keyup(function(){
iDoMathsGood();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="markup">Adjust Price: <input name="markup" id="markup" value="10"/> % </span>
<table id="myTable" class="tablesorter-blackice" border="1">
<thead>
<tr>
<th>Sku#</th>
<th>Availability</th>
<th>Cert #</th>
<th>Shape</th>
<th>Weight</th>
<th>Colour</th>
<th>Clarity</th>
<th>Cut</th>
<th>[MM]</th>
<th class="header">US$/ct</th>
<th class="header">US$/ct</th>
<th class="header">Hidden Orig Price</th>
<th class="header">US$/St</th>
</tr>
</thead>
<tbody>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>ewrer</td>
<td>erwer</td>
<td class="weight">12</td>
<td>ewr</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct">42.50</td>
<td class="adj_ct"></td>
<td class="price"></td>
<td class="adjprice"> <span class="amount"></span>
</td>
</tr>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>ewrer</td>
<td>erwer</td>
<td class="weight">6</td>
<td>ewr</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct">32.75</td>
<td class="adj_ct"></td>
<td class="price"></td>
<td class="adjprice"> <span class="amount"></span>
</td>
</tr>
</tbody>
</table>

To begin with, you're calling the multInputs function improperly. Don't forget the () when calling a function (or other method).
jQuery("#markup").keyup(multInputs);
should be
jQuery("#markup").keyup(multInputs());
From there, you've got a few other errors (to begin with):
var $inmult = $(this).val();, you're calling this from within the function but without actually having a "this" to be referred to. If you move this within the "each" function, then you'll have a "this" to refer to.
Of course, make sure you've linked to JQuery! :)
I would also add a class to the weight to make it easy to refer to
I'm not going to debug the whole thing but this should give you a start
$(document).ready(function () {
$("#markup").keyup(multInputs());
function multInputs() {
$("tr").each(function () {
var $inmult = $(this).find('td.weight' ).text();
var $val1 = $('.price .amount', this).text().substring(1);
var $mult = $inmult / 100;
$mult += 1;
var $total = $val1 * $mult;
$('.adjprice .amount', this).text("$" + $total.toFixed(2));
$val1 = $('.org_ct', this).text();
$mult = $inmult / 100;
$mult += 1;
$total = $val1 * $mult;
$('.adj_ct', this).text($total.toFixed(2));
});
}
});

Using jQuery to select table group columns

This is a part of my table columns I want to select. Here's the code:
<tr>
<th colspan="2">
</th>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
Now i want to be able to select the whole big column. Tried many methods but none work so far. Any help would be appreciated.

well it will be
$('th[colspan="2"],td[colspan="2"]')

well if you know which column it is , ie 3rd column then it will be like
$("table td:nth-child(3),table th:nth-child(3)")
another answer could be
in case you can change the markup
<tr>
<th colspan="2" class="bigcol">
</th>
</tr>
<tr>
<td class="bigcol"></td><td></td>
</tr>
<tr>
<td colspan="2" class="bigcol"></td>
</tr>
$(".bigcol").hide()

This bit more complex jquery code does the trick. It is looking for a th and all the td with a specific colspan (so it's not perfect, because you can't have 2 big tds ina a row). It also hides the required amount of tds with 1 colspan. http://jsfiddle.net/balintbako/xz6W4/
var colw = 2;
var position = $("th[colspan=" + colw + "]").prevAll().length;
$("th[colspan=" + colw + "]").hide();
$("tr").each(function () {
if ($(this).find("th").length !== 0) {
return;
}
if ($(this).find("td[colspan=" + colw + "]").length !== 0) {
$(this).find("td[colspan=" + colw + "]").hide();
return;
}
for (var i = 1; i <= colw; i++) {
$(this).find("td:nth-child(" + (position + i) + ")").hide();
}
});