How to Group columns in front end? - javascript

Table has to be displayed in front end. Following is the code.
<logic:present name="searchStudent">
<table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0">
<caption><b><bean:message key="label.student.details.display"/></b></caption>
<tr>
<td align="center"><b><bean:message key="label.student.class.code"/></b></td>
<td align="center"><b><bean:message key="label.student.name.code"/></b></td>
<td align="center"><b><bean:message key="label.student.section.code"/></b></td>
<td align="center"><b><bean:message key="label.edit" /></b></td>
<td align="center"><b><bean:message key="label.delete" /></b></td>
</tr>
<logic:iterate name="searchStudent" id="row">
<tr>
<td rowspan="2">
<bean:write name="row" property="sclass" />
</td>
<td>
<bean:write name="row" property="sname" />
</td>
<td>
<bean:write name="row" property="section" />
</td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();updateStudent(this);"
type="image"
src="${pageContext.request.contextPath}/images/pen_edit_thick.png"
class="imgEditPen"
title="<bean:message key="button.tooltip.edit"/>"></td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();deleteStudent();"
type="image"
src="${pageContext.request.contextPath}/images/icon_delete.gif"
class="imgEditPen"
title="<bean:message key="button.tooltip.remove"/>"></td>
</tr>
</logic:iterate>
</table>
</logic:present>
It has three columns in table namely class,student name and section. Since class is same for some student it has to spanned across students having same class. Following is the sample output.
Data is fetched from Backend.


Colspan Attribute can merge columns in a table.
<td colspan="2">Sum: $180</td>
Example
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Result
Refer: https://www.w3schools.com/tags/att_td_colspan.asp
Rowspan Attribute:
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
https://www.w3schools.com/tags/att_td_rowspan.asp

Related

separate big table in html into small tables

I am creating a table but I have to separate it into separate tables. They must be separated by "table_title" and the content of the tables is "table_line" I would greatly appreciate your support
<thead>
<tr>
<th>Product</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="titulo_tabla">Title 1</td>
</tr>
<tr>
<td class="linea_tabla">Resolución de la pantalla</td>
<td class="linea_tabla">1366 x 768 Pixeles</td>
</tr>
<tr>
<td class="linea_tabla">Pantalla táctil</td>
<td class="linea_tabla">No</td>
</tr>
<tr>
<td class="linea_tabla">Tipo HD</td>
<td class="linea_tabla">HD</td>
</tr>
<tr>
<td class="linea_tabla">Retroiluminación LED</td>
<td class="linea_tabla">Si</td>
</tr>
<tr>
<td class="linea_tabla">Relación de aspecto nativa</td>
<td class="linea_tabla">16:9</td>
</tr>
<tr>
<td class="linea_tabla">Pantalla antirreflejante</td>
<td class="linea_tabla">Si</td>
</tr>
<tr>
<td class="linea_tabla">Brillo de pantalla</td>
<td class="linea_tabla">220 cd / m²</td>
</tr>
<tr>
<td class="linea_tabla">Densidad del pixel</td>
<td class="linea_tabla">112 ppi</td>
</tr>
<tr>
<td class="linea_tabla">Espacio de color RGB</td>
<td class="linea_tabla">NTSC</td>
</tr>
<tr>
<td class="linea_tabla">Gama de colores</td>
<td class="linea_tabla">45%</td>
</tr>
<tr>
<td class="linea_tabla">Máxima velocidad de actualización</td>
<td class="linea_tabla">60 Hz</td>
</tr>
<tr>
<td class="linea_tabla">Razón de contraste (típica)</td>
<td class="linea_tabla">400:1</td>
</tr>
<tr>
<td colspan="2" class="titulo_tabla">TItle 2</td>
</tr>
<tr>
<td class="linea_tabla">Modelo del procesador</td>
<td class="linea_tabla">i5-1135G7</td>
</tr>
<tr>
<td class="linea_tabla">Frecuencia del procesador turbo</td>
<td class="linea_tabla">4.2 GHz</td>
</tr>
<tr>
<td class="linea_tabla">Familia de procesador</td>
<td class="linea_tabla">Intel® Core™ i5 de 11ma Generación</td>
</tr>
<tr>
<td class="linea_tabla">Núcleos del procesador</td>
<td class="linea_tabla">4</td>
</tr>
<tr>
<td class="linea_tabla">Caché del procesador</td>
<td class="linea_tabla">8 MB</td>
</tr>
<tr>
<td class="linea_tabla">Tipo de cache en procesador</td>
<td class="linea_tabla">Smart Cache</td>
</tr>
<tr>
<td class="linea_tabla">Frecuencia configurable TDP-up</td>
<td class="linea_tabla">2.4 GHz</td>
</tr>
<tr>
<td class="linea_tabla">TDP-up configurable</td>
<td class="linea_tabla">28 W</td>
</tr>
<tr>
<td class="linea_tabla">TDP-down configurable</td>
<td class="linea_tabla">12 W</td>
</tr>
<tr>
<td class="linea_tabla">Frecuencia configurable TDP-down</td>
<td class="linea_tabla">0.9 GHz</td>
</tr>
<tr>
<td colspan="2" class="titulo_tabla">Title 3</td>
</tr>
<tr>
<td class="linea_tabla">Cantidad de puertos tipo A USB 3.2 Gen 1 (3.1 Gen 1)</td>
<td class="linea_tabla">2</td>
</tr>
<tr>
<td class="linea_tabla">Puertos Ethernet LAN (RJ-45)</td>
<td class="linea_tabla">1</td>
</tr>
<tr>
<td class="linea_tabla">Número de puertos HDMI</td>
<td class="linea_tabla">1</td>
</tr>
<tr>
<td class="linea_tabla">Versión HDMI</td>
<td class="linea_tabla">1.4</td>
</tr>
<tr>
<td class="linea_tabla">Combo de salida de auriculares / micrófono del puerto</td>
<td class="linea_tabla">Si</td>
</tr>
<tr>
<td class="linea_tabla">Tipo de puerto de carga</td>
<td class="linea_tabla">Toma de entrada de CC</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let types = [... new Set($('table.original tr .titulo_tabla').get().map(type => type.textContent))];
//create a container for the cloned tables
$('table.original').after(`<h4>After:</h4><div class="cloned-tables"></div>`)
//loop over types, clone tables, modify accordingly
$.each(types, function(index, type) {
$(`<p class="type">${type}</p>${$('table.original')[0].outerHTML}`)
.appendTo('.cloned-tables')
.find('.titulo_tabla').each(function() {
//if (this.textContent !== type) { this.parentElement.remove(); }
//this.remove();
});
});
</script>
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
I would like to separate by table title, any help is welcome.
descripcion de código

Can you just make two separate tables similar to this:
<tbody>
<tr>
<td colspan="2" class="titulo_tabla">Title 1</td>
</tr>
...
<tbody>
<tr>
<td colspan="2" class="titulo_tabla">Title 2</td>
</tr>

Javascript not running in browser, but works in JSFiddle and some other html editors

I wrote this simple code which takes in parameters from the database Caspio to create a simple table. I just want this table to 1. remove all fields which are empty (not filled out by user) and 2. have alternating colored rows to make it easier to see. I've looked through the other forums but I can't find a good solution (I'm new to JS).The code works in JSFiddle as well as a couple of other html editors, but not all and it doesn't work when I implement it. Does anyone see the issue? I've attached all my code. Just the Javascript file, there are no other attachments.
https://jsfiddle.net/c0yoat51/
<table cellpadding="10" class="Form" BORDER="5" WIDTH="95%">
<tbody>
<tr>
<th colspan="2">
<h3>[#field:TestOrder] - [#field:Facility]</h3>
</th>
</tr>
</tbody>
<colgroup>
<col width="250" />
<col width="750" />
</colgroup>
<tbody>
<tr>
<th>FIELD</th>
<th>RESPONSE</th>
</tr>
<tr align="LEFT">
<td>Facility :</td>
<td>[#field:Facility]</td>
</tr>
<tr align="LEFT">
<td>Patient ID :</td>
<td>[#field:PatientID]</td>
</tr>
<tr align="LEFT">
<td>First Name :</td>
<td>[#field:PatientFirst]</td>
</tr>
<tr align="LEFT">
<td>Last Name :</td>
<td></td>
</tr>
<tr align="LEFT">
<td>Date of Birth:</td>
<td>[#field:DateOfBirth]</td>
</tr>
<tr align="LEFT">
<td>Gender :</td>
<td></td>
</tr>
<tr align="LEFT">
<td>Primary Phone :</td>
<td>[#field:PrimaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Secondary Phone :</td>
<td>[#field:SecondaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Emergency Contact :</td>
<td>[#field:EmergencyContact]</td>
</tr>
<tr align="LEFT">
<td>Emergency Number :</td>
<td>[#field:EmergencyNumber]</td>
</tr>
<tr align="LEFT">
<td>Patient Address :</td>
<td>[#field:PatientAddress]</td>
</tr>
<tr align="LEFT">
<td>City :</td>
<td>[#field:City]</td>
</tr>
<tr align="LEFT">
<td>State :</td>
<td>[#field:State ]</td>
</tr>
<tr align="LEFT">
<td>Zip Code :</td>
<td>[#field:ZipCode]</td>
</tr>
<tr align="LEFT">
<td>Special Instructions :</td>
<td>[#field:SpecialInstructions]</td>
</tr>
<tr align="LEFT">
<td>Primary Insurance :</td>
<td>[#field:PrimaryInsurance]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber ID :</td>
<td>[#field:PrimarySubscriberID]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber Relationship :</td>
<td>[#field:PrmarySubscriberRelationship]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance :</td>
<td>[#field:SecondaryInsurance ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance ID :</td>
<td>[#field:SecondaryInsuranceID ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Subscriber Relationship :</td>
<td>[#field:SecondarySubscriberRelationship ]</td>
</tr>
<tr align="LEFT">
<td>Diagnosis :</td>
<td>[#field:Diagnosis]</td>
</tr>
<tr align="LEFT">
<td>Other Diagnosis :</td>
<td>[#field:OtherDiagnosis]</td>
</tr>
<tr align="LEFT">
<td>Physician Name :</td>
<td>[#field:PhysicianName ]</td>
</tr>
<tr align="LEFT">
<td>Other Physician :</td>
<td>[#field:OtherPhysician]</td>
</tr>
<tr align="LEFT">
<td>Physician Phone :</td>
<td>[#field:PhysicianPhone]</td>
</tr>
<tr align="LEFT">
<td>Physician Fax :</td>
<td>[#field:PhysicianFax]</td>
</tr>
<tr align="LEFT">
<td>After Hours Phone :</td>
<td>[#field:AfterHoursPhone]</td>
</tr>
<tr align="LEFT">
<td>Test Order :</td>
<td>[#field:TestOrder]</td>
</tr>
<tr align="LEFT">
<td>Test Duration :</td>
<td>[#field:TestDuration]</td>
</tr>
<tr align="LEFT">
<td>Holter Performed :</td>
<td>[#field:HolterPerformed]</td>
</tr>
<tr align="LEFT">
<td>Holter Test Order :</td>
<td>[#field:HolterTestOrder]</td>
</tr>
<tr align="LEFT">
<td>Holter Duration :</td>
<td>[#field:HolterDuration]</td>
</tr>
<tr align="LEFT">
<td>Previous Holter Date :</td>
<td>[#field:PreviousHolterDate]</td>
</tr>
<tr align="LEFT">
<td>Requested Start Date :</td>
<td>[#field:RequestedStartDate]</td>
</tr>
<tr align="LEFT">
<td>Receive Monitor :</td>
<td>[#field:ReceiveMonitor]</td>
</tr>
<tr align="LEFT">
<td>Recorder ID Number :</td>
<td>[#field:RecorderIDNumber ]</td>
</tr>
<tr align="LEFT">
<td>H_P :</td>
<td>[#field:H_P]</td>
</tr>
<tr align="LEFT">
<td>Upload HP :</td>
<td>[#field:UpploadHP]</td>
</tr>
<tr align="LEFT">
<td>Authorize :</td>
<td>[#field:Authorize]</td>
</tr>
<tr align="LEFT">
<td>Submit :</td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.Form tr').filter(function() {
return $(this).find('td:eq(1):empty').length > 0;
}).hide();
</script>
<style type="text/css">
tr:nth-child(even) {
background-color: #D3D3D3
}
</style>
Please help, and thanks!
All the javascript code is at the bottom, the rest is just making the table
So the same code, copied and pasted won't be working at https://html-online.com/editor/

you need apply your code with in document.ready .It will run only window after load.nbsp; not select from :empty .you need to trim() .Then only get the empty space td also .! matching the empty element of td
$(document).ready(function() {
$('.Form').find('tbody tr').filter(function() {
return !$(this).find('td:eq(1)').text().trim()
}).hide()
})
Updated
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nisha Jewellery</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.Form').find('tbody tr').filter(function() {
return !$(this).find('td:eq(1)').text().trim()
}).hide()
})
</script>
<style type="text/css">
tr:nth-child(even) {
background-color: #D3D3D3
}
</style>
</head>
<body>
<table class="Form" border="5" width="95%" cellpadding="10">
<thead>
<tr>
<th colspan="2">
<h3>[#field:TestOrder] - [#field:Facility]</h3>
</th>
</tr>
</thead>
<colgroup>
<col width="250" />
<col width="750" /> </colgroup>
<tbody>
<tr>
<th>FIELD</th>
<th>RESPONSE</th>
</tr>
<tr align="LEFT">
<td>Facility :</td>
<td>[#field:Facility]</td>
</tr>
<tr align="LEFT">
<td>Patient ID :</td>
<td>[#field:PatientID]</td>
</tr>
<tr align="LEFT">
<td>First Name :</td>
<td>[#field:PatientFirst]</td>
</tr>
<tr align="LEFT">
<td>Last Name :</td>
<td> </td>
</tr>
<tr align="LEFT">
<td>Date of Birth:</td>
<td>[#field:DateOfBirth]</td>
</tr>
<tr align="LEFT">
<td>Gender :</td>
<td> </td>
</tr>
<tr align="LEFT">
<td>Primary Phone :</td>
<td>[#field:PrimaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Secondary Phone :</td>
<td>[#field:SecondaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Emergency Contact :</td>
<td>[#field:EmergencyContact]</td>
</tr>
<tr align="LEFT">
<td>Emergency Number :</td>
<td>[#field:EmergencyNumber]</td>
</tr>
<tr align="LEFT">
<td>Patient Address :</td>
<td>[#field:PatientAddress]</td>
</tr>
<tr align="LEFT">
<td>City :</td>
<td>[#field:City]</td>
</tr>
<tr align="LEFT">
<td>State :</td>
<td>[#field:State ]</td>
</tr>
<tr align="LEFT">
<td>Zip Code :</td>
<td>[#field:ZipCode]</td>
</tr>
<tr align="LEFT">
<td>Special Instructions :</td>
<td>[#field:SpecialInstructions]</td>
</tr>
<tr align="LEFT">
<td>Primary Insurance :</td>
<td>[#field:PrimaryInsurance]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber ID :</td>
<td>[#field:PrimarySubscriberID]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber Relationship :</td>
<td>[#field:PrmarySubscriberRelationship]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance :</td>
<td>[#field:SecondaryInsurance ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance ID :</td>
<td>[#field:SecondaryInsuranceID ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Subscriber Relationship :</td>
<td>[#field:SecondarySubscriberRelationship ]</td>
</tr>
<tr align="LEFT">
<td>Diagnosis :</td>
<td>[#field:Diagnosis]</td>
</tr>
<tr align="LEFT">
<td>Other Diagnosis :</td>
<td>[#field:OtherDiagnosis]</td>
</tr>
<tr align="LEFT">
<td>Physician Name :</td>
<td>[#field:PhysicianName ]</td>
</tr>
<tr align="LEFT">
<td>Other Physician :</td>
<td>[#field:OtherPhysician]</td>
</tr>
<tr align="LEFT">
<td>Physician Phone :</td>
<td>[#field:PhysicianPhone]</td>
</tr>
<tr align="LEFT">
<td>Physician Fax :</td>
<td>[#field:PhysicianFax]</td>
</tr>
<tr align="LEFT">
<td>After Hours Phone :</td>
<td>[#field:AfterHoursPhone]</td>
</tr>
<tr align="LEFT">
<td>Test Order :</td>
<td>[#field:TestOrder]</td>
</tr>
<tr align="LEFT">
<td>Test Duration :</td>
<td>[#field:TestDuration]</td>
</tr>
<tr align="LEFT">
<td>Holter Performed :</td>
<td>[#field:HolterPerformed]</td>
</tr>
<tr align="LEFT">
<td>Holter Test Order :</td>
<td>[#field:HolterTestOrder]</td>
</tr>
<tr align="LEFT">
<td>Holter Duration :</td>
<td>[#field:HolterDuration]</td>
</tr>
<tr align="LEFT">
<td>Previous Holter Date :</td>
<td>[#field:PreviousHolterDate]</td>
</tr>
<tr align="LEFT">
<td>Requested Start Date :</td>
<td>[#field:RequestedStartDate]</td>
</tr>
<tr align="LEFT">
<td>Receive Monitor :</td>
<td>[#field:ReceiveMonitor]</td>
</tr>
<tr align="LEFT">
<td>Recorder ID Number :</td>
<td>[#field:RecorderIDNumber ]</td>
</tr>
<tr align="LEFT">
<td>H_P :</td>
<td>[#field:H_P]</td>
</tr>
<tr align="LEFT">
<td>Upload HP :</td>
<td>[#field:UpploadHP]</td>
</tr>
<tr align="LEFT">
<td>Authorize :</td>
<td>[#field:Authorize]</td>
</tr>
<tr align="LEFT">
<td>Submit :</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>

Adding Image on html table dynamically using JQuery

I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?

As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]

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>

JQuery TableSorter click actions have no effect

I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?

This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/

Try changing your header row to use <th> tags instead of <td> tags.

You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/

Categories

Resources