show/hide select options when td class is multiple - javascript

When I choose an option in a select, some columns are displayed, some are hidden. Some columns have several class.
For example:
"object 7" is in "category 1" and "category 3".
"object 7" is displayed in "category 3" but not in "category 1".
I would like to display it also in category 1.
function categories() {
var sections = document.getElementById("sections").value;
if (sections == "cat1") {
$('.cat1').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat1').each(function() {
this.style.display = "none"
});
}
if (sections == "cat2") {
$('.cat2').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat2').each(function() {
this.style.display = "none"
});
}
if (sections == "cat3") {
$('.cat3').each(function() {
this.style.display = "table-cell"
});
} else {
$('.cat3').each(function() {
this.style.display = "none"
});
}
if (sections == "tous") {
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "table-cell"
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
<option value="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>
Could you tell me what's wrong in my code ?


You can simpify your code in this following approach:
var sections = document.getElementById("sections").value;
$('table tr td').each(function(){
$(this).css('display', $(this).hasClass(sections) ? 'block' : 'none');
});
You have to change the display property based on condition.
$(this).hasClass(sections)
hasClass method determines whether any of the matched elements are
assigned the given class.
function categories() {
var sections = document.getElementById("sections").value;
$('table tr td, table tr th').each(function(){
$(this).css('display', $(this).hasClass(sections) ? 'inline-block' : 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
<option value="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>


First it will be better to attach the change event using jQuery.
$('#sections').on('change', function(){
//Your event core here
});
And remove the inline onclick from you select :
<select class="form-control" id="sections" name="sections">
You can hide all the td and th after every change then show the elements by classname like :
$('.'+class_name).show();
Hope this will help you.
$('#sections').on('change', function(){
var class_name = $(this).val();
$('td,th').hide();
$('.'+class_name).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections">
<option value="choisir" selected disabled>Choisir</option>
<option id="cat1" value="cat1">categorie 1</option>
<option id="cat2" value="cat2">categorie 2</option>
<option id="cat3" value="cat3">categorie 3</option>
<option id="tous" value="tous">Tous</option>
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="cat1">objet 1</th>
<th class="cat1">objet 2</th>
<th class="cat2">objet 3</th>
<th class="cat2">objet 4</th>
<th class="cat3">objet 5</th>
<th class="cat3">objet 6</th>
<th class="cat1 cat3">objet 7</th>
<th class="cat2 cat3">objet 8</th>
</thead>
<tbody class="text-primary">
<tr>
<td class="cat1">objet 1</td>
<td class="cat1">objet 2</td>
<td class="cat2">objet 3</td>
<td class="cat2">objet 4</td>
<td class="cat3">objet 5</td>
<td class="cat3">objet 6</td>
<td class="cat1 cat3">objet 7</td>
<td class="cat2 cat3">objet 8</td>
</tr>
</tbody>
</table>


I just made a little change to your script. Hide all first and then show each class..
function categories() {
var sections = document.getElementById("sections").value;
// hide all first and then show
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "none";
});
if (sections == "cat1") {
$('.cat1').each(function() {
this.style.display = "table-cell";
});
}
if (sections == "cat2") {
$('.cat2').each(function() {
this.style.display = "table-cell";
});
}
if (sections == "cat3") {
$('.cat3').each(function() {
this.style.display = "table-cell";
});
}
if (sections == "tous") {
$('.cat1, .cat2, .cat3').each(function() {
this.style.display = "table-cell";
});
}
}

Related

how to calculate rows total onclick function

I am trying to calculate column Number when I select married total are shown only married and when I select Unmarried total are shown only unmarried and if none of above total are show both.
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='1'>Married</option>
<option value='2'>Unmarried</option>
<option value='all'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td>800</td>
<td>All</td>
</tr>
</tbody>
</table>
just I want to calculate particular selected value.
if any solutions, please help me and Thanks in advance.

You can use each to loop thru the .content, check if the text is including in the array, if it is, show and add the total.
Note: I added an id to td total. This is to make it easier to update the cell.
function filterText() {
var data = $("#filterText").val();
var isAll = data.includes("All");
var total = 0;
$(".content").hide().each(function() {
if (isAll || data.includes($(this).find("td:eq(3)").text().trim())) {
$(this).show();
total += +$(this).find("td:eq(2)").text();
}
})
$("#total").text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='Married'>Married</option>
<option value='Unmarried'>Unmarried</option>
<option value='Widow'>Widow</option>
<option value='All'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>30</td>
<td>Widow</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td id="total">800</td>
<td>All</td>
</tr>
</tbody>
</table>
Or you can use jQuery filter to filter the tr that is including the selected value. You can reduce the shown tr to get the total.
function filterText() {
var data = $("#filterText").val();
var shown = $(".content").hide().filter(function() {
return data.includes($(this).find("td:eq(3)").text().trim()) || data.includes("All");
}).show().get();
var total = shown.reduce((c, v) => {
return c + +$(v).find("td:eq(2)").text()
}, 0);
$("#total").text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='Married'>Married</option>
<option value='Unmarried'>Unmarried</option>
<option value='Widow'>Widow</option>
<option value='All'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>30</td>
<td>Widow</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td id="total">800</td>
<td>All</td>
</tr>
</tbody>
</table>

How to change bootstrap-table row background?

If the result is "good", I want the entire row to turn green. But it does not change anything.
https://jsfiddle.net/Tonato_/tnw3j5p2/7/
Here is the code.
I do not realize at all what is the problem. I think I did it all correctly.
function rowStyle(row, index) {
const obj = {};
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('BAD'))) {
return Object.assign({}, obj, {
classes: 'danger'
});
}
if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('GOOD'))) {
return Object.assign({}, obj, {
classes: 'success'
});
}
return obj;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
<thead>
<tr>
<th scope="col" style="width: 8%" class="text-center">Number</th>
<th scope="col" style="width: 20%" class="text-center">Name</th>
<th scope="col" style="width: 61%" class="text-center">Present</th>
<th scope="col" style="width: 10%" class="text-center">Result</th>
</tr>
</thead>
<tr>
<td class="text-center">01</td>
<td class="text-center">$title01</td>
<td>$present01</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">$title02</td>
<td>$present02</td>
<td scope="row" class="text-center">BAD</td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">$title03</td>
<td>$present03</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
</table>

You can achieve it by using simple jQuery code, Run the snippet below
$('table tr').each(function() {
if($(this).find('td:last-child').html() === 'GOOD'){
$(this).css('background-color', 'green');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
<thead>
<tr>
<th scope="col" style="width: 8%" class="text-center">Number</th>
<th scope="col" style="width: 20%" class="text-center">Name</th>
<th scope="col" style="width: 61%" class="text-center">Present</th>
<th scope="col" style="width: 10%" class="text-center">Result</th>
</tr>
</thead>
<tr>
<td class="text-center">01</td>
<td class="text-center">$title01</td>
<td>$present01</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">$title02</td>
<td>$present02</td>
<td scope="row" class="text-center">BAD</td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">$title03</td>
<td>$present03</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
</table>

I just update your code with few jQuery changes. Try this I hope it'll help you out. Thanks
$(document).ready(function() {
$('.table tr td').each(function(i, v){
if(v.textContent === 'GOOD') {
$(v.parentElement).addClass('table-success');
} else if(v.textContent === 'BAD') {
$(v.parentElement).addClass('table-danger');
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
<thead>
<tr>
<th scope="col" style="width: 8%" class="text-center">Number</th>
<th scope="col" style="width: 20%" class="text-center">Name</th>
<th scope="col" style="width: 61%" class="text-center">Present</th>
<th scope="col" style="width: 10%" class="text-center">Result</th>
</tr>
</thead>
<tr>
<td class="text-center">01</td>
<td class="text-center">$title01</td>
<td>$present01</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">$title02</td>
<td>$present02</td>
<td scope="row" class="text-center">BAD</td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">$title03</td>
<td>$present03</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
</table>

First add an id to the table, and then wrap the tr with <tbody>.
<table id='my-table' data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
<thead>
<tr>
<th scope="col" style="width: 8%" class="text-center">Number</th>
<th scope="col" style="width: 20%" class="text-center">Name</th>
<th scope="col" style="width: 61%" class="text-center">Present</th>
<th scope="col" style="width: 10%" class="text-center">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">01</td>
<td class="text-center">$title01</td>
<td>$present01</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">$title02</td>
<td>$present02</td>
<td scope="row" class="text-center">BAD</td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">$title03</td>
<td>$present03</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
</tbody>
</table>
Then by jQuery use can loop through each tr of tbody in your table. Then based on your result, add css to that row.
$('#my-table tbody tr').each(function(i, item){
var result = $(item).find('td').last().text();
if(result === 'GOOD') $(item).css('background-color', 'green');
else $(item).css('background-color', 'red');
})

How to view multiple tables through dropdown menu?

How can I have 2 or more tables on 1 page with only viewing 1 table at the time with dropdown menu you choose which table to show without a button or refreshing the page? Does anyone have an idea? Atleast we need to use ajax/js. I use datatables plugin for my tables. Here is a Fiddle
<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

You can use jquery hide/show method to do the same.
Please take a look at the fiddle
Below code handles showing/hiding of tables
$(function() {
$('#table1').wrap('<div id="hidetable1" class="hide" style="display:none"/>');
$('#table2').wrap('<div id="hidetable2" class="hide" style="display:none"/>');
$('#table3').wrap('<div id="hidetable3" class="hide" style="display:none"/>');
$('#table1').DataTable( {
"searching": true
} );
$('#table2').DataTable( {
"searching": true
} );
$('#table3').DataTable( {
"searching": true
} );
console.log($("#drop"))
$("#hide"+ $("#drop")[0].value).show();
$("#drop").change(function () {
var end = this.value;
$('.hide').hide();
$("#hide"+end).show();
});
});

You can do it by making an onchange function, giving ids to the table and displaying table according to the value like this
function display(val){
document.getElementById(val).style.display = "block";
val== "table1"?document.getElementById("table2").style.display = "none":document.getElementById("table1").style.display = "none";;
}
#table2{
display:none;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
</select>
<table border='1' id="table1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
If you have more than two tables, you can simply do it by adding a class
function display(val){
var el = document.getElementsByClassName("allTables");
for(i=0; i<el.length; i++) {
el[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
}
.allTables{
display:none;
}
#table1{
display:block;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
<option value='table3'>table3</option>
</select>
<table border='1' id="table1" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table3" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

Initially set any one table which you want to display and make all the others hide. Then pass the selected table id to the onchange propery then hide all the other tables. To get all the tables which we want to hide, group it under a class name.
function show(){
var selectedTable= document.getElementById("drp").value;
var elements = document.getElementsByClassName('tableClass')
for (var i = 0; i < elements.length; i++){
if(elements[i].id==selectedTable)
elements[i].style.display = '';
else
elements[i].style.display = 'none';
}
}
<select onchange="show(value)" id="drp">
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>
</br></br>
<table border='1' id="table1" class="tableClass">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="tableClass" style="display:none;">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

Input text field with event in javascript and auto fill value in target element

I have a problem in targetting the last th tag.In the fifth th, i put
input type text.How to add event in this text field and the value of
the last th(ave) should be updated automatically?Any help here is
much appreciated.
<tr>
<th colspan="3">Learning Areas</th>
<th colspan="2">Term 1</th>
<th colspan="2">Term 2</th>
<th colspan="2">Term 3</th>
<th colspan="2">Term 4</th>
<th>Ave</th>
</tr>
</thead>
<tbody>
#foreach($card['AllGrade'] as $subject)
{!! Form::hidden('grade_id[]',$subject['grade_id']) !!}
<tr>
<th colspan="3">{!! $subject->subject !!}</th>
<th colspan="2">{!! $subject->term_1 !!}</th>
<th colspan="2">{!! $subject->term_2 !!}</th>
<th colspan="2">{!! $subject->term_3 !!}</th>
<th colspan="2"><input text="term_4" value="{!! $subject->term_4 !!}"
class="form-control" name="term_4"></th>
<th colspan="2" name ="ave" id ="ave" value=""> total</th>
</tr>
#endforeach
<script type="text/javascript">
$("tbody tr").each(function() {
var total = 0;
var ave = 0;
var count = 1;
$(this).children('th').not(':first').not(':last').each(function () {
//"this" is the current element in the loop
var number = ($(this).children('input').length == 0) ? $(this).html() :
$(this).children('input').first().val();
total += parseInt(number);
ave = total/count;
count++;
});
$(this).children('th').last().html(ave);
});
</script>

First things first.
I don't know if there is a reason why you chose th, but the ones inside tbody should better be td like :
<td colspan="3">{!! $subject->subject !!}</td>
and later you can change this line from this
$(this).children('th').not(':first').not(':last').each(function () {
to
$(this).children('td').not(':first').not(':last').each(function () {
And now the last part
function calculateAve() {
var aveValues = 0;
$("tbody tr").each(function() {
var total = 0;
var ave = 0;
var count = 1;
$(this).children('td').not(':first').not(':last').each(function () {
//"this" is the current element in the loop
var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();
total += parseInt(number);
ave = total/count;
count++;
});
$(this).children('td').last().html(ave);
aveValues = aveValues+ave;
});
$('#totalAve').html(aveValues/2);
}
calculateAve();
$('#myTable').on('keyup', 'input', function(){
calculateAve();
});
table#myTable th {
background: #8BC34A;
color: #fff;
}
table#myTable, table#myTable td, table#myTable th {
border: solid #efefef;
border-collapse: collapse;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th colspan="3">Subject</th>
<th colspan="2">Term 1</th>
<th colspan="2">Term 2</th>
<th colspan="2">Term 3</th>
<th colspan="2">Term 4</th>
<th>Ave</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Math</td>
<td colspan="2">81</td>
<td colspan="2">87</td>
<td colspan="2">81</td>
<td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td>
<td colspan="2" name ="ave" id ="ave" value=""> total</td>
</tr>
<tr>
<td colspan="3">Science</td>
<td colspan="2">89</td>
<td colspan="2">83</td>
<td colspan="2">81</td>
<td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td>
<td colspan="2" name ="ave" id ="ave" value=""> total</td>
</tr>
<tr>
<td colspan="11">Total Average</td>
<td id="totalAve" colspan="2"></td>
</tr>
</tbody>
</table>

Change background of entire table row

I'm looking to make the entire row of a table change colour (either the background colour or text colour) based on the value of the column labelled "Status". If the value in the "Status" column is "Expired" the background of the entire row should change.
(Edit: The data is going to be pulled dynamically from a database).
Any suggestions?
HTML Code
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
Thanks in advance.

If you can change how the table is rendered than I would just add the text as a class. This will be the best performance option and requires no JavaScript and the content will not flash.
tr.Expired td {
background-color: red;
}
tr.Active td {
background-color: green;
}
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="Active">
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr class="Expired">
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
Or you will need to run JavaScript code that reads the cell value and adds the class.
$("tr:has(td:last:contains('Expired'))").addClass("Expired");
tr.Expired td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>

try using CSS only adding a class to the tr.
tr.active > td {
background-color: green;
}
tr.expired > td {
background-color: red;
}
https://jsfiddle.net/jt717mL8/

In your case the status column is the 5th. So you may do something like:
$('table tr:gt(0)').each(function(idx, ele) {
if ($(ele).find('td:eq(4)').text() == 'Expired') {
$(ele).css('backgroundColor', 'yellow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

You can first get index of status th and then check each td with same index and check its text.
var i = $('th:contains(Status)').index();
$('tr').each(function() {
var td = $(this).find('td').eq(i);
if (td.text() == 'Expired') td.css('background', 'red')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

Categories