Change color table when checkbox ticked - javascript

I'm using AdminLTE template ( Bootstrap ), and i want to change the color of the tr when my checkbox is ticked
<table id="example1" class="table table-bordered table-striped dataTable" aria-describedby="example1_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
ID
</th>
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
ID
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 430px;">
Sujet
</th>
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
Nom du client
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 384px;">
Département
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 250px;">
Status
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 183px;">
Derniére reponse
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
ID
</th>
<th rowspan="1" colspan="1">
ID
</th>
<th rowspan="1" colspan="1">
Sujet
</th>
<th rowspan="1" colspan="1">
Client
</th>
<th rowspan="1" colspan="1">
Département
</th>
<th rowspan="1" colspan="1">
Statut
</th>
<th rowspan="1" colspan="1">
Derniere reponse
</th>
</tr>
</tfoot>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
12
</td>
<td class=" ">
Pb SQL
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-success">
SQL
</small>
</td>
<td class=" ">
<small class="label label-success">
Ouvert
</small>
</td>
<td class=" ">
30/09/2014 à 12h24
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
18
</td>
<td class=" ">
Pb FTP
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-success">
Ouvert
</small>
</td>
<td class=" ">
30/09/2014 à 12h21
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
19
</td>
<td class=" ">
Quels sont vos DNS ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
30/09/2014 à 10h13
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
22
</td>
<td class=" ">
Facture #123456789
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-danger">
En attente Tech Niveau II
</small>
</td>
<td class=" ">
30/09/2014 à 07h34
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
123
</td>
<td class=" ">
Paiement reçu ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-primary">
En attente paiement
</small>
</td>
<td class=" ">
29/09/2014 à 23h45
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
90
</td>
<td class=" ">
Pb renouvellement
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 21h13
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
193
</td>
<td class=" ">
Un gay dans l'equipe ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-default">
Pour Nico
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 15h14
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
3045
</td>
<td class=" ">
Detail offre pro
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-primary">
Pré-vente
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 13h37
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
4567
</td>
<td class=" ">
Quel modes de paiement autorisez vous ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-primary">
Attente serivce commercial
</small>
</td>
<td class=" ">
29/09/2014 à 10h54
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
6789
</td>
<td class=" ">
Paiement non abouti
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 00h01
</td>
</tr>
</tbody>
</table>
I want to use JS but i don't know how to do :(
Tried this :
$("input[type=checkbox]").on("change", function() {
var $chk = $(this);
var isChecked = $chk.prop('checked');
if (isChecked) {
$chk.parent().addClass("info");
}
else {
$chk.parent().removeClass("info");
}
});
But doesn't work..
I really ned help :(
Thanks a lot ! ( I'm sorry if my english is bad, i am French :))) )


You are selecting the parent element which is a label, not the tr. Use closest to find the tr that the checkbox is in.
$("table tbody").on("change", "input[type='checkbox']", function() {
$(this).closest("tr").toggleClass("info", this.checked);
});


Js Fiddle
here you are giving the class .info for the label which is parent of <input>
$chk.parent().addClass("info");
you need to find the exact parent <tr> to add class
$chk.parents('tr').addClass("info");

Related

Is there a way to combine these similar jQuery event listener functions?

I have multiple jquery event listener functions that either show or hide a checkmark button based on if there is any input in the input box. The functions are practically identical minus the ID names. I'm wondering if there's a way to combine these similar functions into one, maybe using a for loop or forEach method? Any advice on how to achieve this is greatly appreciated!
Code is listed down below but I also made a codepen sample.
$("#chwValue").on("input", function() {
$("#addChw").removeAttr("style");
if ($(this).val() === "") {
$("#addChw").hide();
}
});
$("#eleValue").on("input", function() {
$("#addEle").removeAttr("style");
if ($(this).val() === "") {
$("#addEle").hide();
}
});
$("#stmValue").on("input", function() {
$("#addStm").removeAttr("style");
if ($(this).val() === "") {
$("#addStm").hide();
}
});
$("#hhwValue").on("input", function() {
$("#addHhw").removeAttr("style");
if ($(this).val() === "") {
$("#addHhw").hide();
}
});
$("#gasValue").on("input", function() {
$("#addGas").removeAttr("style");
if ($(this).val() === "") {
$("#addGas").hide();
}
});
$("#wtrValue").on("input", function() {
$("#addWtr").removeAttr("style");
if ($(this).val() === "") {
$("#addWtr").hide();
}
});
$("#peakChwValue").on("input", function() {
$("#addPeakChw").removeAttr("style");
if ($(this).val() === "") {
$("#addPeakChw").hide();
}
});
$("#laborValue").on("input", function() {
$("#addLabor").removeAttr("style");
if ($(this).val() === "") {
$("#addLabor").hide();
}
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
</tr>
</tbody>
</table>

You can try something like this:
var mappings = { //Need a better name
'#chwValue': '#addChw',
'#hhwValue': '#addHhw'
// Add the rest of the mappings here
}
Object.keys(mappings).forEach(function(key) {
var value = mappings[key];
$(key).on("input", function() {
$(value).removeAttr("style");
if ($(this).val() === "") {
$(value).hide();
}
});
});

Give all the inputs a common class. Give them an attribute that refers to the related addXxx element.
$(".inputValue").on("input", function() {
let rel = $($(this).data("add"));
rel.removeAttr("style");
if ($(this).val() === "") {
rel.hide();
}
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput inputValue" data-add="#addChw">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput inputValue" data-add="#addEle">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput inputValue" data-add="#addStm">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput inputValue" data-add="#addHhw">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput inputValue" data-add="#addGas">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput inputValue" data-add="#addWtr">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput inputValue" data-add="#addPeakChw">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput inputValue" data-add="#addLabor">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i>
</td>
</tr>
</tbody>
</table>

To achieve this in a more DRY manner you can relate the cells in the columns by their index. When an input element raises an input event you can capture its index within the parent tr, then retrieve the corresponding icon cell from the following row by that same index. Something like this:
let $iconCells = $('.icon-row td');
$('.input-row input').on('input', e => {
let $input = $(e.target)
let index = $input.closest('td').index();
$iconCells.eq(index).find('i').toggle($input.val().length > 0);
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
.icon-row i {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">
CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">
ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">
STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">
HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">
GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">
WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">
Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">
Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr class="input-row">
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" name="chwValue" class="chwInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="eleValue" class="eleInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="stmValue" class="stmInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="hhwValue" class="hhwInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="gasValue" class="gasInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="wtrValue" class="wtrInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="peakChwValue" class="peakChwInput" />
</td>
<td class="text-center inputBorder">
<input type="text" name="laborValue" class="laborInput" />
</td>
</tr>
<tr class="text-center borderTop icon-row">
<td></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
<td><i class="far fa-check-circle fa-3x checkMark"></i></td>
</tr>
</tbody>
</table>

Store the relationships in an array of objects and iterate through.
let objs = [
{'chwValue': 'addChw'},
{'eleValue': 'addEle'},
{'stmValue': 'addStm'},
{'hhwValue': 'addHhw'},
{'gasValue': 'addGas'},
{'wtrValue': 'addWtr'},
{'peakChwValue': 'addPeakChw'},
{'laborValue': 'addLabor'}];
objs.forEach(e => {
let [input, el] = Object.entries(e)[0];
$(`#${input}`).on("input", function() {
$(`#${el}`).removeAttr("style");
if ($(this).val() === "") $(`$${el}`).hide();
});
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
</tr>
</tbody>
</table>

How about this?
$("#chwValue, #eleValue, #stmValue, #hhwValue, #gasValue, #wtrValue, #peakChwValue, #laborValue").on("input", function() {
//get the id selector from the id value (everything before 'Value')
let idName = $(this).attr('id').split('Value')[0]
//capitalize the first character
idName = idName[0].toUpperCase() + idName.slice(1);
//add the id selector dynamically
$("#add"+idName).removeAttr("style");
if ($(this).val() === "") {
$("#add"+idName).hide();
}
});
$("#chwValue, #eleValue, #stmValue, #hhwValue, #gasValue, #wtrValue, #peakChwValue, #laborValue").on("input", function() {
//get the id selector from the id value (everything before 'Value')
let idName = $(this).attr('id').split('Value')[0]
//capitalize the first character
idName = idName[0].toUpperCase() + idName.slice(1);
//add the id selector dynamically
$("#add"+idName).removeAttr("style");
if ($(this).val() === "") {
$("#add"+idName).hide();
}
});
.checkMark:hover {
cursor: pointer;
transition: transform 0.2s;
transform: scale(1.1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<table id="tableData" class="table text-light text-end table-borderless inputTable">
<thead>
<tr class='text-center bordered'>
<th></th>
<th class="bordered" scope="col">CHW
<span class='units'>[tonhr]</span>
</th>
<th class="bordered" scope="col">ELE
<span class='units'>[kWh]</span>
</th>
<th class="bordered" scope="col">STM
<span class='units'>[lb]</span>
</th>
<th class="bordered" scope="col">HHW
<span class='units'>[mmbtu]</span>
</th>
<th class="bordered" scope="col">GAS
<span class='units'>[CCF]</span>
</th>
<th class="bordered" scope="col">WTR
<span class='units'>[kgal]</span>
</th>
<th class="bordered" scope="col">Peak CHW
<span class='units'>[ton]</span>
</th>
<th class="bordered" scope="col">Labor
<span class='units'>[Hours]</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 100px" class="bordered">Baseline</th>
<td class="text-center inputBorder">
<input type="text" id="chwValue" class="chwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="eleValue" class="eleInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="stmValue" class="stmInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="hhwValue" class="hhwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="gasValue" class="gasInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="wtrValue" class="wtrInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="peakChwValue" class="peakChwInput">
</td>
<td class="text-center inputBorder">
<input type="text" id="laborValue" class="laborInput">
</td>
</tr>
<tr class='text-center borderTop'>
<td></td>
<td>
<i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
<td>
<i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
</td>
</tr>
</tbody>
</table>

querySelectorAll not selecting all the selected elements

I'm creating a chrome extension and one of my first steps is to create an array of college professor names that are in a table which is listed on a website. Here is the JS and it works perfectly on the main page. However when I go on to a course which list's specific professor names, it wont work most of the time. It will still grab the professors that are in the main page all the time because it's all in the same document. Every so often when i keep refreshing the page it randomly grabs all the professors but most of the time it will not. So it looks like my selectors are working but why does it not work every time?
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
console.log(tableElementNode);
Here is a snippet of the html on the main webpage (which is the same on all other course pages). The JS code above grabs the professor "Burgos" and lists it on to the log.
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" checked="" class="select-all">
</th>
<th class="persist hidden-print info-col"></th>
<th>CRN #</th>
<th>Status</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
</tr>
</thead>
<tbody>
<tr data-id="88047" data-index="0" class="section-item section first">
<td class="persist chk-col">
<input type="checkbox" class="select" checked="">
</td>
<td class="persist col-icons hidden-print">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> </button>
</td>
<td class="">
88047
</td>
<td class="">
Enrolled
</td>
<td class="persist">
MAC
</td>
<td class="">
2283
</td>
<td class="persist">
003
</td>
<td class="">
<div class="professor" id="0">Burgos, Fernando</div>
</td>
Here is a snippet of the html on a certain course webpage and the JS code doesn't seem to grab the professor name(Wang, Jing) here.
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" class="select-all">
</th>
<th class="persist info-col"></th>
<th>CRN #</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th class="persist">Component</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
<th>Parts of Term</th>
</tr>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section first linked-section">
<td class="persist chk-col row-label">
<input type="checkbox" class="select " data-sectionid="80886" checked="">
</td>
<td class="persist col-icons">
<ul>
<li class="persist">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> <span class="visible-acc">Section Details</span></button>
</li>
</ul>
</td>
<td class=" row-label">
80886
</td>
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
</td>
<td class=" row-label">
<div> <span aria-label="Monday">M</span><span aria-label="Wednesday">W</span> 9:30am - 10:45am - CHE 103</div>
</td>
<td class=" row-label">
3
</td>
<td class=" row-label">
Tampa
</td>
<td class=" row-label">
Fall 2018 - Full Term
</td>
</tr>
<tr class="section-flags">
I've looked almost everywhere for a solution and cannot find anything.
Edit: I've even right clicked and copied the selector on the element I need and the JS will still not grab the find the element

You need to do array[...].outerText to get content inside div.
var tableElementNode = document.querySelectorAll(".section-detail-grid tbody div")[0].outerText;
console.log(tableElementNode);
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" class="select-all">
</th>
<th class="persist info-col"></th>
<th>CRN #</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th class="persist">Component</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
<th>Parts of Term</th>
</tr>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section first linked-section">
<td class="persist chk-col row-label">
<input type="checkbox" class="select " data-sectionid="80886" checked="">
</td>
<td class="persist col-icons">
<ul>
<li class="persist">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> <span class="visible-acc">Section Details</span></button>
</li>
</ul>
</td>
<td class=" row-label">
80886
</td>
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
</td>
<td class=" row-label">
<div> <span aria-label="Monday">M</span><span aria-label="Wednesday">W</span> 9:30am - 10:45am - CHE 103</div>
</td>
<td class=" row-label">
3
</td>
<td class=" row-label">
Tampa
</td>
<td class=" row-label">
Fall 2018 - Full Term
</td>
</tr>
</tbody>
</table>

Keep the JavaScript code just before the body end tag. I also faced the same issue but after following this everything looks fine.

Combine two html table contents(part of the tables) using javascript and download as png and csv

I have used the id's of the contents I needed by using $('#xxx').html() and added them to a variable like var b = '' + $('#xxx').html()+$('#yyy').html() + . and thought to downlaod b as png and csv.
<div id="table_parent_div">
<div class="table_header">
<table class="data_table">
<thead>
<tr style="height: 40px;">
<th class="header">KPI Name</th>
<th class="header">May-2016</th>
<th class="header">Jun-2016</th>
<th class="header">Jul-2016</th>
<th class="header">Aug-2016</th>
<th class="header">Sep-2016</th>
<th class="header">Oct-2016</th>
<th class="header">Nov-2016</th>
<th class="header">Dec-2016</th>
<th class="header">Jan-2017</th>
<th class="header">Feb-2017</th>
<th class="header">Mar-2017</th>
<th class="header">Apr-2017</th>
<th class="header">May-2017</th>
</tr>
</thead>
</table>
</div>
<div class="table_body">
<table class="data_table_body">
<tbody id="category_name_0">
<tr>
<td class=" name ">category name 0</td>
<td class=" name ">149.7 </td>
<td class=" name ">149.57 </td>
<td class=" name ">140.6 </td>
<td class=" name ">154.82 </td>
<td class=" name ">158.12 </td>
<td class=" name ">168.71 </td>
<td class=" name ">161.11 </td>
<td class=" name ">149.15 </td>
<td class=" name">149.03 </td>
<td class=" name">114.2 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name1 </td>
<td class=" sub_cat">35.22 </td>
<td class=" sub_cat">37.16 </td>
<td class=" sub_cat">26.03 </td>
<td class=" sub_cat">38.96 </td>
<td class=" sub_cat">35.22 </td>
<td class=" sub_cat">49.99 </td>
<td class=" sub_cat">43.24 </td>
<td class=" sub_cat">39.66 </td>
<td class=" sub_cat">40.61 </td>
<td class=" sub_cat">32.2 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name3 </td>
<td class=" sub_cat">34.43 </td>
<td class=" sub_cat">30.88 </td>
<td class=" sub_cat">28.75 </td>
<td class=" sub_cat">29.54 </td>
<td class=" sub_cat">33.04 </td>
<td class=" sub_cat">33.46 </td>
<td class=" sub_cat">28.54 </td>
<td class=" sub_cat">30.41 </td>
<td class=" sub_cat">22.78 </td>
<td class=" sub_cat">17.93 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat">80.06 </td>
<td class=" sub_cat">81.52 </td>
<td class=" sub_cat">85.83 </td>
<td class=" sub_cat">86.31 </td>
<td class=" sub_cat">89.85 </td>
<td class=" sub_cat">85.26 </td>
<td class=" sub_cat">89.33 </td>
<td class=" sub_cat">79.08 </td>
<td class=" sub_cat">85.64 </td>
<td class=" sub_cat">64.07 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
<tbody id="category_name_1">
<tr>
<td class=" name ">category name 1</td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">3.72 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name1 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">2.23 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name5 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">1.86 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name4 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.37 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat">sample_name3 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.78 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.7 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
<tbody id="category_name_2">
<tr>
<td class=" name ">category name 2</td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">74.51 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name4 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">73.55 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.96 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
</table>
</div>
Here I need to combine the thead and tbody(for ex: tbody with id="category_name_1" ) and download them as png and csv.

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>

The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

JQuery how to fetch 2nd and 3rd TD content depend on 4th td click

Here the html markup having a table, i need to fetch td's content on click and save it into hidden field.
JS FIDDLE DEMO
Html Markup :
<table>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">1</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Customer Relations</span>
</td>
<td>one</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_1" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">2</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">Marketing </span>
</td>
<td>two</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_2" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;" class="odd">
<td style="width:70px;" class=" sorting_1">3</td>
<td class=" "> <span id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_lblworkcategory">General</span>
</td>
<td>three</td>
<td align="center" style="width:80px;" class=" ">
<img atl="edit" style="border-width:0px;cursor:pointer" src="images/edt1.png" class="update_3" title="Edit" id="ctl00_ContentPlaceHolder1_gvworkcategory_ctl02_Image1">
</td>
<td class=" ">View Details
</td>
</tr>
</table>
<input id="hdid" type="hidden" />
<input id="hdcol2" type="hidden" />
<input id="hdcol3" type="hidden" />
JavaScript:
$("img[class^='update_']").live('click', function (event) {
var getId = $(this).attr("class")
$("#hdid").val(getId);
alert(getId)
});

$(this).closest('tr').find('td').eq(1).text();
and
$(this).closest('tr').find('td').eq(2).text();
Demo -----> http://jsfiddle.net/bpGXp/19/
Updated One -----> http://jsfiddle.net/bpGXp/21/ (with no whitespace)

have a look here: http://jsfiddle.net/bpGXp/18/
CODE
$("img[class^='update_']").live('click', function (event) {
var tr = $(this).closest("tr");
var tds = $(tr).find("td");
alert($(tds[0]).text() + " | " + $(tds[1]).text() + " | " + $(tds[2]).text());
//save col1, col2 and col3 values where you need it
});
hope it helps

Categories