jQuery Inject TD into appropriate Column (Tetris Style) - javascript

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);
}
});

Related

Moving specific tr's into a specific td with javascript

I'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen

You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer

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>

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>

Add click event to TH pseudo element, get data attribute from TH and prevent TH event from firing on click

I am creating an HTML table which currently has a click event attached to the column heading TH to sort the table.
What I am now trying to do is to expand a column by showing additional hidden columns when you click "somewhere".
Now, my initial thought for this "somewhere" was to create a :pseudo element on each TH which has hidden columns (they all have a specific css class) and to attach the show event on to this :pseudo element, however, when I do this its triggering the column sorting.
I have tried changing $('.xxp').on('click', function () { to $('.xxp:before').on('click', function () { but I because the TH has data attributes that I need, when I use $(this).parent('th') I am not able to get the data so the expand is not firing.... Can you target the parent of a pseudo element?
So, looking at the snippet, I want to click on the green to sort the table, I want to click on the red to show the hidden columns but not trigger the sort at the same time (which it is currently).
$(document).ready(function () {
var openData = null;
$('.xxp').on('click', function () {
var $this = $(this),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp:before {
display:inline-block;
width:15px;
height:15px;
content:"";
background-color:#ff0000;
float:right;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>
And here is a fiddle: http://jsfiddle.net/wf_4/qkv510ot/

Ok, thanks to the suggestion from #bergi this is how I did it.
$(document).ready(function () {
var pseudoBtn = $('<span />').attr({ 'class': 'pseudoBtn' });
$('.xxp').prepend(pseudoBtn);
var openData = null;
$('.xxp span.pseudoBtn').on('click', function (e) {
e.stopPropagation();
var $this = $(this).parent('th'),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp > span.pseudoBtn {
display:inline-block;
width:15px;
height:15px;
background-color:#ff0000;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>

how to align my td's with equal width?

this is my html code:http://jsfiddle.net/Udxyb/427/
in the below code..Under each of these columns(section1, section2, section3, section4) i want two equal columns and these columns with should not vary if the input data is lenghty.
instead the width of both columns must remain the same rather than increase.is it possible???
<table id="main_table" style="width:100%">
<thead>
<tr class="firstline">
<th colspan="2">Column1</th>
<th colspan="2">Column2</th>
<th colspan="2">Column3</th>
<th colspan="2">Column4</th>
</tr>
</thead>
<tbody>
<tr style="width:1002px; background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td style="width:125px;">item 111sdfgadgrfag</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
<td>item 115</td>
<td>item 116</td>
<td>item 117</td>
<td>item 118dfgdfgdfgdfgg</td>
</tr>
<tr>
<td colspan="2">item 121</td>
<td colspan="2">item 122</td>
<td colspan="2">item 123</td>
<td colspan="2">item 124</td>
</tr>
<tr>
<td colspan="2">item 131</td>
<td colspan="2">item 132</td>
<td colspan="2">item 133</td>
<td colspan="2">item 134</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td> <td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 211</td>
<td colspan="2">item 212</td>
<td colspan="2">item 213</td>
<td colspan="2">item 214</td>
</tr>
<tr>
<td colspan="2">item 221</td>
<td colspan="2">item 222</td>
<td colspan="2">item 223</td>
<td colspan="2">item 224</td>
</tr>
<tr>
<td colspan="2">item 231</td>
<td colspan="2">item 232</td>
<td colspan="2">item 233</td>
<td colspan="2">item 234</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 311</td>
<td colspan="2">item 312</td>
<td colspan="2">item 313</td>
<td colspan="2">item 314</td>
</tr>
<tr>
<td colspan="2">item 321</td>
<td colspan="2">item 322</td>
<td colspan="2">item 323</td>
<td colspan="2">item 324</td>
</tr>
<tr>
<td colspan="2">item 331</td>
<td colspan="2">item 332</td>
<td colspan="2">item 333</td>
<td colspan="2">item 334</td>
</tr>
</tbody>
</table>

Write:
#main_table{table-layout:fixed;}
Updated fiddle here.

Assign fixed table layout property to your table and word-wrap:break-word; for the td's
Hope that will solves your problem
<table id="main_table" style="width:100%;table-layout:fixed;">
in css
td {
padding: 5px;
word-wrap:break-word;
}

Categories

Resources