We Keep Coding

When TR is clicked, then check the checkbox

When I click it for the first time, it click, but doesn't turn off...
I've tried this one, it checked and uncheck but only once.
This one doesn't work for me either.
$(document).ready(function() {
$("tr").click(function() {
var checkbox = $(this).find("input[type=checkbox]");
if (!checkbox.prop("checked", "")) {
checkbox.prop("checked", "false");
} else {
checkbox.prop("checked", "true");
}
});
});
td{
background:red;
padding:10px 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>test</td>
</tr>
</table>

Here is a toggle
$(document).ready(function() {
$("tr").on("click", function(e) {
const $target = $(e.target)
const $checkbox = $(this).find("input[type=checkbox]");
// only run code when NOT clicking checkbox
if (!$checkbox.is($target)) {
let checked = $checkbox.is(":checked")
$checkbox.prop("checked", !checked)
}
});
});
td {
background: red;
padding: 10px 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>test</td>
</tr>
</table>

Cannot read property 'childNodes' checkbox to get value from same row

Below code should get me the value of the column next to the checked box in the table, but, once the button is clicked, I am getting:
Cannot read property childNodes of null
Note: database from firebase which where the values from the table come from
Table image :
rootRefReAgents.on("child_added", snap => {
var AgentName = snap.child("Name").val();
$("#table_body_Test").append("<tr><td>" + AgentName + "</td><td><INPUT TYPE=\"Checkbox\"> </Input></td></tr>");
});
}
function ActionData(){
let agents = [];
let table = document.getElementById("table_body_Test");
let childNodes = Array.from(table.childNodes);
// let childNodes = table.childNodes;
for (let child of childNodes.values()) {
console.log(`child: ${child}`);
if (child.constructor.name !== "HTMLTableRowElement") {
continue;
}
let agent = child.childNodes.item(1).innerHTML;
console.log(`agent: ${agent}`);
let checkbox = child.childNodes.item(3).childNodes.item(1);
console.log(`checkbox: ${checkbox}`);
console.log(checkbox.checked);
if (checkbox.checked) {
agents.push(agent);
}
}
console.log(`agents: ${agents}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
<button id="submitBtn" onclick="ActionData()">Next</button>

ES6 brought new methods that simplify the code and its reading
const tableBody = document.querySelector('#testTable tbody' );
document.querySelector('#submitBtn').onclick=()=>
{
let agents = [];
console.clear();
for (let rowX of tableBody.rows )
{
let
agent = rowX.cells[0].textContent,
checkbox = rowX.cells[1].querySelector('input[type=checkbox]')
;
console.log( 'agent:', agent, 'checked:', checkbox.checked);
if (checkbox.checked) { agents.push(agent); }
}
console.log( 'agents (array):', agents.join(' / '));
}
/// bonus info :
/*
rootRefReAgents.on("child_added", snap=>{
let
newRow = tableBody.insertRow(-1);
newRow.insertCell(0).textContent = snap.child("Name").val();
newRow.insertCell(1).innerHTML = '<input type="Checkbox">';
});
*/
#testTable { margin: auto; border-collapse: collapse }
#testTable thead tr {
color: #D2002E;
background: #FFCC01;
height:32px;
font-weight: bold;
}
#testTable tr:nth-child(even) {background-color: lightgrey }
#testTable td { border:1px solid grey; padding: 0 20px; }
#testTable td:nth-child(2) { text-align: center }
<table id="testTable">
<thead>
<tr> <td>Agents</td> <td>Select</td> </tr>
</thead>
<tbody>
<tr> <td>AMC</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>Mygulfex</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>topStar</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>WMC</td> <td> <input type="checkbox" > </td> </tr>
</tbody>
</table>
<button id="submitBtn" >see Selects in console</button>

Javascript collection of ids for form post without checkboxes

I'm designing a page which needs to post a set of IDs to a php script.
There is a table with a number of Items (with associated images) to select. Old school would be to put a check box next to each Item and post the form, then loop through the form post with php.
But the design is requesting that "no checkboxes be used". The idea being that when a user clicks one of the Items, that item gets highlighted in CSS then a button will post all the highlighted items.
The html looks like this:
<td>
<table id="cell-5" class="change_back" onclick="checkItem('cell-5',5);">
<tr>
<td>
<img src="img/5.png" />
</td>
</tr>
</table>
</td>
<td>
<table id="cell-6" class="change_back" onclick="checkItem('cell-6',6);">
<tr>
<td>
<img src="img/6.png" />
</td>
</tr>
</table>
</td>
<td>
<table id="cell-7" class="change_back" onclick="checkItem('cell-7',7);">
<tr>
<td>
<img src="img/7.png" />
</td>
</tr>
</table>
</td>
Javascript:
function checkItem(clicked, prdId){
alert(prdId + ' was selected');
var cur = document.getElementById(clicked).className;
//if not highlighted
if (cur == 'change_back'){
//add item
document.getElementById(clicked).className = 'change_back_clicked';
}
else{
//remove item
document.getElementById(clicked).className = 'change_back';
}
}
the css:
.change_back {
background-color: #FFFFFF;
}
.change_back:hover {
cursor: pointer;
}
.change_back_clicked {
background-color: #C0C0C0;
}
Thoughts on how to do this without jquery and with?

var group = document.getElementById("group"),
elements = group.getElementsByTagName("div");
group.addEventListener("click", function(e) {
e.preventDefault();
if ("DIV" === e.target.tagName) {
if ("selected" === e.target.className) {
e.target.classList.remove("selected");
} else {
e.target.classList.add("selected");
}
}
});
#group div {
cursor: pointer;
}
.selected {
background-color: #C0C0C0;
}
<div id="group">
<div>first div</div>
<div>second div</div>
<div>third div</div>
</div>

Well I probably didn't explain what I wanted very clearly, so going with my own solution:
The javascript:
function checkItem(clicked, Id){
//clicked is the table element that was clicked
//Id is the id of the hidden var
//get the current css class of the table element
var cur = document.getElementById(clicked).className;
//flip the css class and update form
if (cur == 'primaryCl')
{
document.getElementById(clicked).className = 'secondaryCl';
//set form var to 'true' for form post
document.getElementById(Id).value = 'true';
}
else
{
//reverse of the above
document.getElementById(clicked).className = 'primaryCl';
document.getElementById(Id).value = 'false';
}
}
The CSS:
.primaryCl {
background-color: #E6E6E6;
border-collapse: separate;
border-spacing: 5px;
border:solid #6A6964 1px;
padding: 0px;
}
.primaryCl:hover {
background-color: #3cb0fd;
cursor: pointer;
}
.secondaryCl {
background-color: #3cb0fd;
border-collapse: separate;
border-spacing: 5px;
border:solid #6A6964 1px;
padding: 0px;
}
The php:
/* css class set dynamically (code removed for brevity) */
$ibClass = "primaryCl";
/* hidden set dynamically (code removed for brevity) */
$hiddenTag = "<input type=\"hidden\" name=\"tp_$Id\" id=\"tp_$Id\" value=\"$hiUpd\">";
/* inside while loop, looping through query results */
$out .= "
<td>
$hiddenTag
<table id=\"cp_$Id\" class=\"$ibClass\" onclick=\"checkItem('cp_$Id', 'tp_$Id');\">
<tr>
<td>
<img alt=\"pic\" height=\"70\" width=\"60\" src=\"$thumbnailDir/$imageMini\" />
</td>
<td>
<span class=\"b12\">$prodName</span>
</td>
</tr>
</table>
</td>";

PHP/jQuery - script not working in cell in every row in table

I have a table with dynamically created rows. In every row in last column I need a button to Show/Hide invisible row under that row which you pressed button.
I have a code, but button Show/Hide working in first row and next rows without any react.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
$(function () {
$('#show_more').on('click',function(){
var id_item = $(".btn").attr( "id-data" );
$('.hidden_row_'+id_item).addClass('hidden_row_sh').removeClass('hidden_row_hide');
$("#wh_tbl tr.hidden_row_"+id_item).fadeIn(400);
$(this).hide();
$('#show_less').show();
});
$('#show_less').on('click',function(){
var id_item = $(".btn").attr( "id-data" );
$('.hidden_row_'+id_item).addClass('hidden_row_hide').removeClass('hidden_row_sh');
$("#wh_tbl tr.hidden_row_"+id_item).fadeOut(400);
$(this).hide();
$('#show_more').show();
});
});
</script>
<style>
table.ranking-table, tr, td, th {
border-collapse:collapse;
}
.hidden_row_hide {
display:none;
}
.hidden_row_sh {
display:table-row;
}
#show_more .sign:after {
content:"⇩";
}
#show_less .sign:after {
content:"⇧";
}
button.btn {
font-weight: bold;
color: #666;
width:100%;
background:none;
border:none;
}
button.btn:focus {
outline:0;
}
</style>
</head>
<body>
<table id="wh_tbl" class="ranking-table" border="1">
<thead>
<tr>
<th>#</th>
<th style="text-align:center;">th_col2</th>
<th style="text-align:center;">th_col3</th>
<th style="text-align:center;">th_col4</th>
<th style="text-align:center;">th_col5</th>
<th style="text-align:center;">th_col6</th>
<th style="text-align:center;">th_col7</th>
</tr>
</thead>
<tbody>
<?php
for($i = 0; $i <= 10; $i++)
{
echo '
<tr>
<td>'.$i.'</td>
<td style="text-align:center;">Text_'.$i.'</td>
<td style="text-align:center;">data_'.$i.'</td>
<td style="text-align:center;">web_'.$i.'</td>
<td style="text-align:center;">xxx_'.$i.'</td>
<td style="text-align:center;">yyy_'.$i.'</td>
<td style="text-align:center;">
<div id="show_more">
<button class="btn" id-data="'.$i.'" >Pokaż <span class="sign"></span></button>
</div>
<div id="show_less" class="hidden_row_hide">
<button class="btn" id-data="'.$i.'" >Ukryj <span class="sign"></span></button>
</div>
</td>
</tr>
<tr class="hidden_row_'.$i.' hidden_row_hide">
<td></td>
<td>col'.$i.'1</td>
<td>col'.$i.'2</td>
<td>col'.$i.'3</td>
<td>col'.$i.'4</td>
<td>col'.$i.'5</td>
<td>col'.$i.'6</td>
</tr>';
}
?>
</tbody>
</table>
</body>
</html>

You need to have unique id per element, so change id to class like below:-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
$('.show_more').on('click',function(){
$(this).closest('tr').next('tr').removeClass('hidden_row_hide');
$(this).hide();
$(this).next('.show_less').show();
});
$('.show_less').on('click',function(){
$(this).closest('tr').next('tr').addClass('hidden_row_hide');
$(this).hide();
$(this).prev('.show_more').show();
});
});
</script>
<style>
table.ranking-table, tr, td, th {
border-collapse:collapse;
}
.hidden_row_hide {
display:none;
}
.hidden_row_sh {
display:table-row;
}
.show_more .sign:after {
content:"⇩";
}
.show_less .sign:after {
content:"⇧";
}
button.btn {
font-weight: bold;
color: #666;
width:100%;
background:none;
border:none;
}
button.btn:focus {
outline:0;
}
</style>
</head>
<body>
<table id="wh_tbl" class="ranking-table" border="1">
<thead>
<tr>
<th>#</th>
<th style="text-align:center;">th_col2</th>
<th style="text-align:center;">th_col3</th>
<th style="text-align:center;">th_col4</th>
<th style="text-align:center;">th_col5</th>
<th style="text-align:center;">th_col6</th>
<th style="text-align:center;">th_col7</th>
</tr>
</thead>
<tbody>
<?php
for($i = 0; $i <= 10; $i++)
{
echo '
<tr>
<td>'.$i.'</td>
<td style="text-align:center;">Text_'.$i.'</td>
<td style="text-align:center;">data_'.$i.'</td>
<td style="text-align:center;">web_'.$i.'</td>
<td style="text-align:center;">xxx_'.$i.'</td>
<td style="text-align:center;">yyy_'.$i.'</td>
<td style="text-align:center;">
<div class="show_more">
<button class="btn" id-data="'.$i.'" >Pokaż <span class="sign"></span></button>
</div>
<div class="show_less hidden_row_hide">
<button class="btn" id-data="'.$i.'" >Ukryj <span class="sign"></span></button>
</div>
</td>
</tr>
<tr class="hidden_row_'.$i.' hidden_row_hide">
<td></td>
<td>col'.$i.'1</td>
<td>col'.$i.'2</td>
<td>col'.$i.'3</td>
<td>col'.$i.'4</td>
<td>col'.$i.'5</td>
<td>col'.$i.'6</td>
</tr>';
}
?>
</tbody>
</table>
</body>
</html>

Toggling nested Table Columns - html, jQuery

I'm relatively new to jQuery but more seasoned using html and css.
I'm currently working on creating a new report that displays a nested table with quarterly results.Sample Quarterly Report
When a user clicks the img next to Q1 or Q2 table row - my expectation is for the Week (wk1 - wkn) columns to hide/show (toggle) as needed.
Additionally, when week columns are hidden, i would like the Quartely column(s) to collapse and dynamically show the sum of hidden weeks (wk1 - wkn).
Most of the code is borrowed from other posts but unfortunately, i was unable to find one that collapses and sums nested columns.
Thanks in advance for your help!
$(document).ready(function () {
var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";
var sum1 = 0;
$('tr').find('.combat1').each(function () {
var combat1 = $(this).text();
if (!isNaN(combat1) && combat1.length !== 0) {
sum1 += parseFloat(combat1);
}
});
var sum2 = 0;
$('tr').find('.combat2').each(function () {
var combat2 = $(this).text();
if (!isNaN(combat2) && combat2.length !== 0) {
sum2 += parseFloat(combat2);
}
});
var sum3 = 0;
$('tr').find('.combat3').each(function () {
var combat3 = $(this).text();
if (!isNaN(combat3) && combat3.length !== 0) {
sum3 += parseFloat(combat3);
}
});
$('.total-combat1').html(sum1);
$('.total-combat2').html(sum2);
$('.total-combat3').html(sum3);
$('.header').click(function() {
//$('td:nth-child(2)').hide();
// if your table has header(th), use this
$('td:nth-child(2),th:nth-child(2)').toggle();
});
});
body {
background: #80dfff;
color: #d5d4d4;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
margin: 0;
overflow-x: auto;
padding: 30px;
}
table {
background: white;
border-collapse: collapse;
border: 1px #393939 solid;
color: black;
margin: 1em 1em 1em 0;
}
thead {
border-collapse: collapse;
color: black;
}
th, td {
border: 1px #aaa solid;
padding: 0.2em;
}
<table>
<thead>
<tr><th colspan=8>2015</th></tr>
<tr><th colspan=4 class="header">Q1
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
<th colspan=3 class="header">Q2
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
<th></th>
</tr>
<tr>
<th>WK1</th>
<th>WK2</th>
<th>WK3</th>
<th>WK4</th>
<th>WK1</th>
<th>WK2</th>
<th>WK3</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="combat1">8170</td>
<td class="combat1">6504</td>
<td class="combat1">6050</td>
<td class="combat1">6050</td>
<td class="combat1">7050</td>
<td class="combat1">7050</td>
<td class="combat1">7050</td>
<td class="total-combat1"></td>
</tr>
<tr>
<td class="combat2">8500</td>
<td class="combat2">10200</td>
<td class="combat2">7650</td>
<td class="combat2">7650</td>
<td class="combat2">8650</td>
<td class="combat2">8650</td>
<td class="combat2">8650</td>
<td class="total-combat2"></td>
</tr>
<tr>
<td class="combat3">9185</td>
<td class="combat3">5515</td>
<td class="combat3">6185</td>
<td class="combat3">7185</td>
<td class="combat3">9185</td>
<td class="combat3">9185</td>
<td class="combat3">9185</td>
<td class="total-combat3"></td>
</tr>
</tbody>
</table>

If you need to toggle the visibility of Q1 or Q2 you can change the header click event in order to obtain the effect produced in the following snippet.
The problem is to select all the cells of your interest and than toggle the visibility.
One way is to limit the cells selected using the jQuery :lt and :gt plus the css
$(function () {
var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";
var sum1 = 0;
$('tr').find('.combat1').each(function () {
var combat1 = $(this).text();
if (!isNaN(combat1) && combat1.length !== 0) {
sum1 += parseFloat(combat1);
}
});
var sum2 = 0;
$('tr').find('.combat2').each(function () {
var combat2 = $(this).text();
if (!isNaN(combat2) && combat2.length !== 0) {
sum2 += parseFloat(combat2);
}
});
var sum3 = 0;
$('tr').find('.combat3').each(function () {
var combat3 = $(this).text();
if (!isNaN(combat3) && combat3.length !== 0) {
sum3 += parseFloat(combat3);
}
});
$('.total-combat1').html(sum1);
$('.total-combat2').html(sum2);
$('.total-combat3').html(sum3);
// The new header click event
$('.header').click(function(e) {
var isVisible = false;
var strSelector = '';
var everyTotIndex = 4;
if (this.innerText.trim() == 'Q1') {
everyTotIndex = 4;
strSelector = 'td:not([colspan="4"]):lt(4), th:not([colspan="4"]):lt(4)';
} else {
everyTotIndex = 3;
strSelector = 'td:not([colspan="3"]):lt(7):gt(3), th:not([colspan="3"]):lt(7):gt(3)';
}
$(this).parents('table').find('tr:eq(2), tbody > tr').find(strSelector).css('display', function(index, value) {
if (this.style.display == 'none') {
isVisible = true;
if ((index % everyTotIndex) == 0) {
$(this).parent().find('td[colspan="' + everyTotIndex + '"], th[colspan="' + everyTotIndex + '"]').remove();
}
return '';
}
if ((index % everyTotIndex) == 0) {
if (this.tagName.toLowerCase() == 'th') {
$('<th colspan="' + everyTotIndex + '" class="total">Total</th>').insertBefore($(this));
} else {
$('<td colspan="' + everyTotIndex + '" class="combat1 total">0</td>').insertBefore($(this));
var obj = $(this).parent().find('td[colspan="' + everyTotIndex + '"]');
obj.text(+obj.text() + parseInt(this.textContent));
}
} else {
if (this.tagName.toLowerCase() == 'td') {
var obj = $(this).parent().find('td[colspan="' + everyTotIndex + '"]');
obj.text(+obj.text() + parseInt(this.textContent));
}
}
return 'none';
});
if (isVisible) {
$(this).find('img').attr('src', "http://www.unesco.org/ulis/imag/minus.png");
} else {
$(this).find('img').attr('src', "http://www.unesco.org/ulis/imag/plus.png");
}
});
});
body {
background: #80dfff;
color: #d5d4d4;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
margin: 0;
overflow-x: auto;
padding: 30px;
}
table {
background: white;
border-collapse: collapse;
border: 1px #393939 solid;
color: black;
margin: 1em 1em 1em 0;
}
thead {
border-collapse: collapse;
color: black;
}
th, td {
border: 1px #aaa solid;
padding: 0.2em;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table>
<thead>
<tr><th colspan=8>2015</th></tr>
<tr><th colspan=4 class="header">Q1
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
<th colspan=3 class="header">Q2
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
<th></th>
</tr>
<tr>
<th>WK1</th>
<th>WK2</th>
<th>WK3</th>
<th>WK4</th>
<th>WK1</th>
<th>WK2</th>
<th>WK3</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="combat1">8170</td>
<td class="combat1">6504</td>
<td class="combat1">6050</td>
<td class="combat1">6050</td>
<td class="combat1">7050</td>
<td class="combat1">7050</td>
<td class="combat1">7050</td>
<td class="total-combat1"></td>
</tr>
<tr>
<td class="combat2">8500</td>
<td class="combat2">10200</td>
<td class="combat2">7650</td>
<td class="combat2">7650</td>
<td class="combat2">8650</td>
<td class="combat2">8650</td>
<td class="combat2">8650</td>
<td class="total-combat2"></td>
</tr>
<tr>
<td class="combat3">9185</td>
<td class="combat3">5515</td>
<td class="combat3">6185</td>
<td class="combat3">7185</td>
<td class="combat3">9185</td>
<td class="combat3">9185</td>
<td class="combat3">9185</td>
<td class="total-combat3"></td>
</tr>
</tbody>
</table>

I tried to figure out what you was trying to do... Correct if me I wrong: you're trying to toggle the set of columns under, for e.g. Q1, when you click on the header column? If so, here the code. I modified your code, I added to nested tables under the main table to organize/ divide the two sets of information so I can select easily with jQuery which one I'm going to toggle.
$(document).ready(function() {
var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";
var sum1 = 0;
$('tr').find('.combat1').each(function() {
var combat1 = $(this).text();
if (!isNaN(combat1) && combat1.length !== 0) {
sum1 += parseFloat(combat1);
}
});
var sum2 = 0;
$('tr').find('.combat2').each(function() {
var combat2 = $(this).text();
if (!isNaN(combat2) && combat2.length !== 0) {
sum2 += parseFloat(combat2);
}
});
var sum3 = 0;
$('tr').find('.combat3').each(function() {
var combat3 = $(this).text();
if (!isNaN(combat3) && combat3.length !== 0) {
sum3 += parseFloat(combat3);
}
});
$('.header-1').click(function() {
$("#table1").toggle();
});
$('.header-2').click(function() {
$("#table2").toggle();
});
});
body {
color: #d5d4d4;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
margin: 0;
overflow-x: auto;
padding: 30px;
}
table {
background: white;
border-collapse: collapse;
border: 1px #393939 solid;
color: black;
margin: 0;
padding: 0;
}
thead {
border-collapse: collapse;
color: black;
}
th,
td,
tr {
border: 1px #aaa solid;
padding: 0;
}
td.combat {
padding: 0.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th colspan=2>2015</th>
</tr>
<tr>
<th class="header-1">Q1
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
<th class="header-2">Q2
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table id="table1">
<tr>
<th>WK1</th>
<th>WK2</th>
<th>WK3</th>
<th>WK4</th>
</tr>
<tr>
<td class="combat combat1">8170</td>
<td class="combat combat1">6504</td>
<td class="combat combat1">6050</td>
<td class="combat combat1">6050</td>
</tr>
<tr>
<td class="combat combat1">8170</td>
<td class="combat combat1">6504</td>
<td class="combat combat1">6050</td>
<td class="combat combat1">6050</td>
</tr>
</table>
</td>
<td>
<table id="table2">
<tr>
<th>WK1</th>
<th>WK2</th>
<th>WK3</th>
</tr>
<tr>
<td class="combat combat2">7050</td>
<td class="combat combat2">7050</td>
<td class="combat combat2">7050</td>
</tr>
<tr>
<td class="combat combat2">7050</td>
<td class="combat combat2">7050</td>
<td class="combat combat2">7050</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>