Develop Reference

Exporting html to Excel / CSV using tableExport, the exported file loses its formatting

i am to trying export a report data / html to excel / csv using tableExport with this code logic
$('#tblRpt').tableExport({ type: 'csv', escape: 'false', tableName:
'yourTableName' });
this code works in other reports which has simple html structure. The report which i am trying to export has nested tables in it. The exported file loses its html formatting. I don't have choice to use third party plugin because of project optimization issues.
Please suggest me a way to solve this issue without using any third party tool/plugin, Thank you
This is the html of my report which i am trying to export.
<tbody><tr>
<td colspan="2" class="no-border-right"><strong></strong></td>
<td align="right" valign="top" class="no-border-left">10/01/2020
10:53</td>
</tr>
<tr>
<td width="20%" class="no-border-right"><strong>User: Practical Head
Office</strong></td>
<td width="60%" align="center" class="no-border-left no-border-right">
<strong id="MidRptHeading">
M.I.D Report - Curent Fleet Only
</strong> (01 Dec 2019 - 31 Dec 2019)
</td>
<td width="20%" align="right" valign="top" class="no-border-left">
<strong></strong></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th valign="top"><strong>Reg no</strong></th>
<th valign="top"><strong>Insure type</strong></th>
<th valign="top"><strong>Make</strong></th>
<th valign="top"><strong>Model type</strong></th>
<th valign="top"><strong>Derivative</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Engine size</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Date of Registration</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Value</strong></th>
<th valign="top" style="text-align: center;"><strong>Seats</strong></th>
<th align="right" valign="top" style="text-align: center;"><strong>Gross vcl wt</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle on date</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle off date</strong></th>
<th valign="top"><strong>Location</strong></th>
<th valign="top" style="text-align: center;"><strong>VIN number</strong></th>
</tr>
</thead>
<tbody id="tblMidVehiclesList">
<tr>
<td valign="top">KP69WBZ</td>
<td valign="top">Car</td>
<td valign="top">NISSAN</td>
<td valign="top">QASHQAI</td>
<td valign="top">QASHQAI DIG-T TEKNA</td>
<td align="center" valign="top">1332</td>
<td align="center" valign="top">20/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">05/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">SJNFFAJ11U2647316</td>
</tr>
<tr>
<td valign="top">BJ69JXU</td>
<td valign="top">Car</td>
<td valign="top">PEUGEOT</td>
<td valign="top">Peugeot GTL 1.2 GT LINE</td>
<td valign="top">308 GT LINE PURETECH S/S</td>
<td align="center" valign="top">1200</td>
<td align="center" valign="top">27/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">10/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">VF3LPHNSJKS346785</td>
</tr>
<tr>
<td valign="top">KN69TGX</td>
<td valign="top">Van up to 3.5T</td>
<td valign="top">VOLKSWAGEN</td>
<td valign="top">Transporter T30</td>
<td valign="top">TRANSPORTER T30 H-LINE TD</td>
<td align="center" valign="top">1968</td>
<td align="center" valign="top">30/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">2</td>
<td align="center" valign="top">3000</td>
<td align="center" valign="top">12/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">WV1ZZZ7HZKH180620</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="border-bottom: 1px solid #000; padding: 0;"></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="40%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td width="17%" valign="top"> </td>
<td width="14%" align="center" valign="top"><strong>At Start of Month</strong></td>
<td width="8%" align="center" valign="top"><strong>Current</strong></td>
</tr>
<tr>
<td valign="top"><strong>Owned vehicles</strong></td>
<td align="center" valign="top">21</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Leased vehicles</strong></td>
<td align="center" valign="top">38</td>
<td align="center" valign="top">3</td>
</tr>
<tr>
<td valign="top"><strong>Temporary vehicles</strong></td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Total fleet</strong></td>
<td align="center" valign="top"><strong>59</strong></td>
<td align="center" valign="top"><strong>3</strong></td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td align="left" valign="top"> </td>
<td align="center" valign="top"><strong>Current fleet</strong></td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Car</strong></td>
<td align="center" valign="top">2</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Minibus</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome up to 3.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>MPV</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van up to 3.5T</strong></td>
<td align="center" valign="top">1</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>HP Cars</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3" valign="top" align="center" style="border-top: 1px solid #000;"><strong>End of report</strong></td>
</tr>
</tbody>

Table Header Scroll using JS

Hi I am working on handling two tables one with table has table head and another table has table body.Need help in fixed table head and two table content with proper alignment.while fixing the header i could not align the table content subsequently to it. With help of id i fix the table header.can anyone fix this alignment.Thanks in advance.
<table id="table-1" class="table table-hover">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<body>
<div class="content">
<table class="table table-striped">
<tbody>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Here is the Demo

You want to show a fixed thead (clone table) on top of a scrolling table (original table).
Check this working demo: CODEPEN demo
Is this what you are looking for? How it works:
HTML part:
<!-- a CONTAINER for everything -->
<div id="table-holder">
<!-- a fixed TOP that is visible or hidden on scroll -->
<div id="table-top">
<!-- a TABLE CLONE that contains the THEAD -->
<table id="table-clone" border="1"></table>
</div>
<!-- a CONTAINER that allows the original table to scroll -->
<div id="table-scroll">
<!-- the ORIGINAL TABLE -->
<table id="table-original" border="1">
<!-- the THEAD -->
<thead>....</thead>
<!-- the TBODY -->
<tbody>....</tbody>
</table>
</div><!-- endof: #table-scroll -->
</div><!-- endof: #table-holder -->
CSS part:
#table-holder {
position:relative;
}
#table-top {
width:100%; /* important */
position:absolute; /* important -> always at top */
display:none; /* hidden at first */
}
#table-scroll {
float:left;
width:100%;
height:100%;
overflow-y:scroll; /* important */
}
table {
width:100%;
}
JS part (jQuery):
// set main table html vars
var $table_top = $("#table-top");
var $table_scroll = $("#table-scroll");
var $table_clone = $("#table-clone");
var $thead_original = $("#table-original thead");
var $thead_clone = $thead_original.clone();
// copy the original THEAD into table-top
$table_clone.append($thead_clone);
// adjust table-top width (consider the width of the Y scrollbar)
$table_top.css("width", $thead_original.width())
// set vars needed to show/hide table-top
var thead_height = $thead_original.height();
//// set the threshold for the show/hide action
var visible_top = $table_scroll.offset().top;
var table_top_visible = 0;
// set onScroll action: show/hide table-top
$table_scroll.on("scroll",function(){
// the the current offset of the original THEAD
var thead_top = $thead_original.offset().top;
//// get the position of the bottom of the THEAD
var thead_bottom = thead_top + thead_height;
// check if the original THEAD is hidden
if (thead_bottom < visible_top) {
// if the original is hidden -> show the clone
if (!table_top_visible) {
table_top_visible = 1;
$table_top.fadeIn();
}
} else {
// else, the original is visible -> hide the clone
if (table_top_visible) {
table_top_visible = 0;
$table_top.fadeOut();
}
}
});

Hightlight text and change color

There
So basically I am new to programming, and I am working on something where you have a table in html, and I am using jquery to check if a certain field has a number, if it does then that row is highlight. Now I have code which works but the problem is I want it to highlight the background in red and change the text color to white, which works as well but the table I have has hyperlinks, which stay blue despite my code, so anybody can improve my code?
I want all the text to turn white, including the links with "href"
$(document).ready(function() {
var levelColumnIndex = 5;
$('tr td:nth-child('+levelColumnIndex+')').each(function() {
var cellText = $(this).html();
if(cellText == 3){
$(this).parent().css('background-color','red');
$(this).parent().css('color','white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
<thead>
<tr class="sr-header">
<th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr>Case ID </nobr> </th>
<th class="tiny" valign="top" width="30%" align="left"><nobr>Subject </nobr> </th>
<th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="2%" align="left"><nobr>Level </nobr> </th>
<th class="tiny" valign="top" width="15%" align="left"><nobr>Status </nobr> </th>
<th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
</tr>
</thead>
<tbody>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case1" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case1">Case1</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-dark-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case2" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case2">Case2</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">4</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case3"position:absolute; white-space:nowrap">
<a title="Case3">Case3</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
</tbody>
</table>

Find a tag in code and color it using css
$(document).ready(function() {
var levelColumnIndex = 5;
$('tr td:nth-child('+levelColumnIndex+')').each(function() {
var cellText = $(this).html();
if(cellText == 3){
$(this).parent().css('background-color','red');
$(this).parent().css('color','white');
$(this).parent().find('a').css('color','white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
<thead>
<tr class="sr-header">
<th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr>Case ID </nobr> </th>
<th class="tiny" valign="top" width="30%" align="left"><nobr>Subject </nobr> </th>
<th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="2%" align="left"><nobr>Level </nobr> </th>
<th class="tiny" valign="top" width="15%" align="left"><nobr>Status </nobr> </th>
<th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
</tr>
</thead>
<tbody>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case1" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case1">Case1</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-dark-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case2" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case2">Case2</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">4</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case3"position:absolute; white-space:nowrap">
<a title="Case3">Case3</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
</tbody>
</table>

use this type of javascript in your code change it
$(function () {
var $table = $('table'),
checkboxColumn = 0;
// checkboxes updates
$table.find('tbody').on('change', 'input', function () {
var $cell = $(this).closest('td');
// only accept checkboxes in the first column
if ($cell[0].cellIndex === checkboxColumn) {
$cell.closest('tr').toggleClass('checked', this.checked);
// update cache with checkbox state
$table.trigger('updateCell', [ $cell[0] ]);
}
});
$table.find('thead input').on('change', function(){
var chk = this.checked;
$table.find('tbody tr').each(function(){
$(this).find('td:eq(' + checkboxColumn + ') input')
.prop('checked', chk)
.trigger('change');
});
});
var headers = {};
headers[checkboxColumn] = { sorter: false };
$table.tablesorter({
widgets: ['zebra'],
headers: headers
});
});
try this demo
http://jsfiddle.net/eY8uH/767/

Currently, your adding style to the tr tag only but you will also need to add color style to the anchor tag as well or else the user-agent stylesheet will overwrite the style.
$(this).parent().css('color','white')
.find('a').css('color','white');
$(document).ready(function() {
var levelColumnIndex = 5;
$('tr td:nth-child('+levelColumnIndex+')').each(function() {
var cellText = $(this).html();
if(cellText == 3){
$(this).parent().css('background-color','red');
$(this).parent().css('color','white')
.find('a').css('color','white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
<thead>
<tr class="sr-header">
<th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr>Case ID </nobr> </th>
<th class="tiny" valign="top" width="30%" align="left"><nobr>Subject </nobr> </th>
<th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="2%" align="left"><nobr>Level </nobr> </th>
<th class="tiny" valign="top" width="15%" align="left"><nobr>Status </nobr> </th>
<th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
<th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
</tr>
</thead>
<tbody>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1696368392</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case1" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case1">Case1</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-dark-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1694436342</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case2" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
<a title="Case2">Case2</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">4</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
<tr class="sr-light-band">
<td class="small bulk-hidden" <nobr="" valign="top" align="left">
<input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
</td>
<td class="small" <nobr="" valign="top" align="left"><a>1681523912</a></td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Case3"position:absolute; white-space:nowrap">
<a title="Case3">Case3</a>
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">
<div title="Jussi" style="position:relative; overflow:hidden; height:100%">
<div style="position:absolute; white-space:nowrap">
</div>
</div>
</td>
<td class="small" <nobr="" valign="top" align="left">3</td>
<td class="small" <nobr="" valign="top" align="left">Unassigned</td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="left"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
<td class="small" <nobr="" valign="top" align="right"></td>
</tr>
</tbody>
</table>

jQuery Inject TD into appropriate Column (Tetris Style)

I have two tables. One is a temporary table and one is a master table that will ultimately be sorted with the contents of the temporary table.
The main reason for this question is that I have too many empty cells in the master table.
I seek to extract the cells from the temp table and put them in the appropriate column in the master table, ascending so that the end result will be 4 columns that only have empty cells where necessary, to allow for normal table flow, without breaking the table flow.
Every element has an associated class, but I just can seem to create a selector that will safely iterate over the temporary table and the master table without breaking the master table. The only hint I can give is that I may need to build a for loop that utilizes the replaceWith() and break jQuery and JavaScript methods, respectively.
Any table rows, after that has been accomplished, that have only empty tds, can be removed.
Lastly, this question stems from another StackOverflow question that I nearly have solved, where, this is the last hurdle that I need to cross to solve it.
Work in progress of that question can be found here.
var $tempScanner = $('table.temp tr td');
$tempScanner.each(function(i, v) {
var $tempClass = $(v).attr("class");
var $tempTD = $(v);
$('#tblGrid tr').each(function(x, o) {
var tdMatch = $(this).eq(x).find($('td.' + $tempClass));
if (tdMatch.length > 0) {
$(this).eq(x).find($('td.' + $tempClass)).replaceWith($tempTD);
}
console.log(tdMatch);
});
});
td,
th {
border: 1px solid #111;
padding: 6px;
}
th {
font-weight: 700;
}
span.pull-right {
float: right;
text-align: right;
}
.a,
.A {
background-color: #ACE;
}
.b,
.B {
background-color: #FAF;
}
.c,
.C {
background-color: #BAB;
}
.d,
.D {
background-color: #ECA;
}
.targetFound {
border: solid 2px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table style="display:;" class="temp">
<tbody>
<tr>
<td colspan="2" data-id="1" data-catg="a" class="a">Ooo<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="7" data-catg="b" class="b">Pppp<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="12" data-catg="c" class="c">Kkkk<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="2" data-catg="a" class="a">Ffff<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="4" data-catg="b" class="b">Ssss<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="15" data-catg="c" class="c">Vvvv<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="5" data-catg="b" class="b">Iiii<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="21" data-catg="c" class="c">Llll<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="22" data-catg="a" class="a">Mmmm<span class="pull-right">kr.9</span>
</td>
<td colspan="2" data-id="7" data-catg="b" class="b">Bbbb<span class="pull-right">kr.12</span>
</td>
<td colspan="2" data-id="8" data-catg="b" class="b">Eeee<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="9" data-catg="c" class="c">Gggg<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="10" data-catg="c" class="c">Cccc<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="11" data-catg="c" class="c">Aaaa<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="6" data-catg="b" class="b">Nnnn<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="3" data-catg="a" class="a">Zzzz<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="13" data-catg="c" class="c">Mmmm<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="14" data-catg="c" class="c">Rrrr<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="17" data-catg="d" class="d">Hhhh<span class="pull-right">kr.5</span>
</td>
<td colspan="2" data-id="18" data-catg="d" class="d">Uuuu<span class="pull-right">kr.5</span>
</td>
<td colspan="2" data-id="19" data-catg="d" class="d">Qqqq<span class="pull-right">kr.5</span>
</td>
<td colspan="2" data-id="20" data-catg="d" class="d">Xxxx<span class="pull-right">kr.5</span>
</td>
</tr>
</tbody>
</table>
<table id="tblGrid">
<tbody>
<tr>
<th class="A" colspan="2">A</th>
<th class="B" colspan="2">B</th>
<th class="C" colspan="2">C</th>
<th class="D" colspan="2">D</th>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
</tbody>
</table>

I can think of various ways to do this.
You could build the table first. Get the number of items for each category. The highest number is the number of TR's that need to be created. An array with the data would be handy here.
For each column (category) keep a variable of the last vertical position that was filled, or the first empty slot. That way you know which one to fill.
You can target the TR and TD you need with eg. a css selector (nth-of-type) or an index. In javascript you can also use cellIndex and rowIndex.
If you want to create TR's dynamically, then every time you want to fill a TD you first check if there's already a TR to put the TD into, otherwise create it.
Get rid of the temp table. It only complicates things.
Also, if all cells in a table have colspan="2" then you don't need them.

I asked the question a different way and received the correct answer in this post.
$(function() {
var $tempScanner = $('table.temp tr td');
var tempArry = [];
$tempScanner.each(function(i, el) {
var d = {};
d.text = $(el).text();
d.html = $(el).html();
d.class = $(el).attr('class');
tempArry.push(d);
});
function compareObj(o1, o2) {
return o1.text > o2.text;
}
tempArry = tempArry.sort(compareObj);
console.log(tempArry);
for (var i = 0; i < tempArry.length; i++) {
var tdClass = tempArry[i].class;
$('#tblGrid td.' + tdClass + ':empty:first').html(tempArry[i].html);
}
});

How can I use special characters in angular directives attributes?

I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive.
For example:
<my-custom-directive my-label="Lärm" />
Another example is the ui.bootstrap.tabs directive:
<tabset>
<tab heading="Lärm"> content ... </tab>
<tab heading="Second Heading"> content ... </tab>
</tabset>
This results in a tab with heading "L�rm". Any ideas?

Usually in a good editor you can change the document encoding type, the document is saved in. try to set it to iso-8859-1/utf-8 and save/upload again.
Next bet would be to change the encoding of the html-output with
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Umlauts often is trial & error...

Use escape characters for javascript.
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody><tr>
<th>Display</th>
<th>Friendly Code</th>
<th>Numerical Code</th>
<th>Description</th>
</tr>
<tr class="grey">
<td class="codes">Ä </td>
<td class="codes">&Auml;</td>
<td class="codes">&#196;</td>
<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
<td class="codes">ä </td>
<td class="codes">&auml;</td>
<td class="codes">&#228;</td>
<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
<td>É</td>
<td>&Eacute;</td>
<td>&#201;</td>
<td>Capital E-acute</td>
</tr>
<tr>
<td>é</td>
<td>&eacute;</td>
<td>&#233;</td>
<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
<td class="codes">Ö </td>
<td class="codes">&Ouml;</td>
<td class="codes">&#214;</td>
<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
<td class="codes">ö </td>
<td class="codes">&ouml;</td>
<td class="codes">&#246;</td>
<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">Ü </td>
<td class="codes">&Uuml;</td>
<td class="codes">&#220;</td>
<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
<td class="codes">ü </td>
<td class="codes">&uuml;</td>
<td class="codes">&#252;</td>
<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">ß</td>
<td class="codes">&szlig;</td>
<td class="codes">&#223;</td>
<td class="codes">SZ ligature</td>
</tr>
<tr>
<td class="codes">«</td>
<td class="codes">&laquo;</td>
<td class="codes">&#171;</td>
<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
<td class="codes">»</td>
<td class="codes">&raquo;</td>
<td class="codes">&#187;</td>
<td class="codes">Right angle quotes</td>
</tr>
<tr>
<td class="codes">„</td>
<td class="codes"> </td>
<td class="codes">&#132;</td>
<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
<td class="codes">“</td>
<td class="codes"> </td>
<td class="codes">&#147;</td>
<td class="codes">Left quotes</td>
</tr>
<tr>
<td class="codes">”</td>
<td class="codes"> </td>
<td class="codes">&#148;</td>
<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
<td class="codes">°</td>
<td class="codes"> </td>
<td class="codes">&#176;</td>
<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
<td class="codes">€</td>
<td class="codes">&euro;</td>
<td class="codes">&#128;</td>
<td class="codes">Euro</td>
</tr>
<tr class="grey">
<td>£</td>
<td>&pound;</td>
<td>&#163;</td>
<td>Pound Sterling</td>
</tr>
</tbody></table>