This is the first time I'm using HTML and Javascript to create a Dashboard. This Dashboard contains a HTML table which contains server name,server desc and time UP,warning critical columns.
From Nagios JSON query generator, I will generate a Availability report URL which returns the JSON value. Now I need to compare the Service Desc in table column and update the the remaining columns by fetching value from the JSON output. How to achieve it.
HTML :
<table id="service_table">
<thead>
<tr>
<th>Service Name</th>
<th>Service Desc</th>
<th>Time OK %</th>
<th>Time Warning %</th>
<th>Time Critical %</th>
</tr
</thead>
<tbody>
<tr>
<td>jenkinsserver</td>
<td>Jenkins PROD GUI</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>nexusserver</td>
<td>nexus GUI</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>sonarserver</td>
<td>sonrqube GUI</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td colspan="5" class="bold" style="text-align:center">CLEARCASE</td>
</tr>
<tr>
<td>clearcasewebserver</td>
<td>clearcase web</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>clearcase server</td>
<td>check clearcase status</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
Javascript:
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return 'Basic ' + hash;
}
$(document).ready(function(){
var end1 = Math.floor((new Date).getTime()/1000);
var start1 = Math.floor(time.setDate(time.getDate() - 1)/1000);
console.log(end1);
console.log(start1);
servicereport = " http://xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=servicegroups&hostgroup=ALM&servicegroup=ALM+Tools&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start1 + "&endtime=" + end1;
$.support.cors = true;
$.ajax({
type: "GET",
url: servicereport,
crossDomain: true,
async: false,
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization',
make_base_auth("nagiosadmin", "nagiosadmin"));
},
dataType: 'json', //data format
success: servicedisplay
});
function servicedisplay(series) {
// 1. remove all existing rows
$('#service_table tbody').empty();
var lent = series.data.servicegroup.services;
var aa = lent.length;
var sm = 0;
var avg = 0;
for (var i=0; i<aa; i++) {
var dataO=series.data.servicegroup.services[i].time_ok;
var dataW=series.data.servicegroup.services[i].time_warning;
var dataC=series.data.servicegroup.services[i].time_critical;
var dataA=(dataO/(dataO + dataW + dataC))*100;
sm +=dataA;
}
avg = sm/aa;
if ( avg < 100 ) {
$('#almserv').css('background-color','red');
} else {
$('#almserv').css('background-color','green');
}
$('#servnum').text(parseFloat(avg).toFixed(2));
$.each(series.data.servicegroup.services, function (index, serv) {
$('<tr>').append(
$('<td>').text(parseFloat((serv.time_ok/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
$('<td>').text(parseFloat((serv.time_warning/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
$('<td>').text(parseFloat((serv.time_critical/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
).appendTo('#service_table');
});
My idea could be something like this:
<table id="service_table">
<thead>
<tr>
<th>Service Name</th>
<th>Service Desc</th>
<th>Time OK %</th>
<th>Time Warning %</th>
<th>Time Critical %</th>
</tr
</thead>
<tbody>
<tr>
<td>jenkinsserver</td>
<td>Jenkins PROD GUI</td>
<td><div id="Col3JPG">0.00</div></td>
<td><div id="Col4JPG">0.00</div></td>
<td><div id="Col5JPG">0.00</div></td>
</tr>
<tr>
<td>nexusserver</td>
<td>nexus GUI</td>
<td><div id="Col3NG">0.00</div></td>
<td><div id="Col4NG">0.00</div></td>
<td><div id="Col5NG">0.00</div></td>
</tr>
<tr>
<td>sonarserver</td>
<td>sonrqube GUI</td>
<td><div id="Col3JPG">0.00</div></td>
<td><div id="Col4SG">0.00</div></td>
<td><div id="Col5SG">0.00</div></td>
</tr>
<tr>
<td colspan="5" class="bold" style="text-align:center">CLEARCASE</td>
</tr>
<tr>
<td>clearcasewebserver</td>
<td>clearcase web</td>
<td><div id="Col3CW">0.00</div></td>
<td><div id="Col4CW">0.00</div></td>
<td><div id="Col5CW">0.00</div></td>
</tr>
<tr>
<td>clearcase server</td>
<td>check clearcase status</td>
<td><div id="Col3CCS">0.00</div></td>
<td><div id="Col4CCW">0.00</div></td>
<td><div id="Col5CCW">0.00</div></td>
</tr>
</tbody>
</table>
Then in your script, you could create a Switch Statement and do the compare there like:
for (var i=0; i<aa; i++) {
switch(series.data.servicegroup.services[i].VariableWithCol2Content){
case "Jenkins PROD GUI": //code for the changes
$("#col3JPG").text(series.data.servicegroup.services[i].time_ok);
$("#col4JPG").text(series.data.servicegroup.services[i].time_warning);
$("#col5JPG").text(series.data.servicegroup.services[i].time_critical);
//add all require code to update the row
break;
case "nexus GUI": //code for the changes
$("#col3NG").text(series.data.servicegroup.services[i].time_ok);
$("#col4NG").text(series.data.servicegroup.services[i].time_warning);
$("#col5NG").text(series.data.servicegroup.services[i].time_critical);
//add all require code to update the row
break;
//and so on with all of them...
Related
I have a simple table and I want to add specific text if an element is empty, so far my code looks like this:
$("table").each(function (index, tableID) {
$(tableID)
.find("thead tr th")
.each(function (index) {
index += 1;
$(tableID)
.find("tbody tr td:nth-child(" + index + ")")
.attr("data-title", $(this).text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
With this code am adding data-title and everything works fine, what am trying to achieve to add - when there is no data: so I modify my code:
$( "table" ).each( function( index, tableID ) {
$( tableID ).find( "thead tr th" ).each( function( index ) {
index += 1;
$( tableID ).find( "tbody tr td:nth-child(" + index + ")" ).attr( "data-title", $(this).text() );
if ($("tbody tr td:nth-child(" + index + ")" ).is(':empty')).append( "-" );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
This part of code where am adding - when table element is empty doesn't work, can anybody try to help me with this?
Your if statement is not using valid syntax. You need the expression body after the if which contains the code to be executed. You cannot call a method from the if statement itself.
Try this:
$("table").each(function(_, table) {
$(table).find("thead tr th").each(function(i) {
let $th = $(this);
let $td = $(table).find("tbody tr td:nth-child(" + (i + 1) + ")");
$td.attr("data-title", $th.text());
if ($td.is(':empty')) {
$td.append("-");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
However, it's worth noting that this code can be made more succinct with a single line of code:
$('tbody td:empty').text('-');
The code you're using to loop through the th/td and add the data attribute seems almost entirely redundant as the th value can be read at the point of use.
I simplified the code a little. I found it easier to make the header data-title values an array i could reference each iteration. The '-' for empty values was just a ternary expression tacked on to the end of the jQuery chain:
$(this).attr("data-title", h[i]).text($(this).text() || "-");
$("table").each(function() {
let h = [], i = 0
$("thead tr th").each(function() {
h.push($(this).text());
})
$(this).find("tbody tr>*").each(function() {
$(this).attr("data-title", h[i]).text($(this).text() || "-");
i++;
if (i >= h.length) i = 0
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
I have an HTML table and I need to define a function that should grab the data from the table and build an array of objects that contains table data. Outside the function I have to declare a variable and assign the returned value from the function.
Thanks in advance.
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Rating</th>
<th>Review</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5/5</td>
<td>This product is so good, I bought 5 more!</td>
</tr>
<tr>
<td>Jane</td>
<td>4/5</td>
<td>Good value for the price.</td>
</tr>
<tr>
<td>David</td>
<td>1/5</td>
<td>Arrived broken :(</td>
</tr>
<tr>
<td>Fiona</td>
<td>5/5</td>
<td>I love it!</td>
</tr>
<tr>
<td>Michael</td>
<td>3/5</td>
<td>Doesn't live up to expectations.</td>
</tr>
</tbody>
</table>
JS
function buildTableData() {
let tbody = document.getElementsByTagName("tbody")[0];
let rows = tbody.children;
let people = [];
for (let row of rows) {
let person = {};
let cells = row.children;
person.rating = cells[0].textContent;
person.review = cells[1].textContent;
person.favoriteFood = cells[2].textContent;
people.push(person);
return people;
}
let data = people;
console.log(data);
}
You can get all the elements by using querySelectorAll('td'). Then use map to to get only the text of it and return this.
function buildTableData() {
const elements = [...document.querySelectorAll('td')];
return elements.map(x => {
return {content : x.innerHTML}
});
}
console.log(buildTableData());
<body>
<h2>Product reviews</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Rating</th>
<th>Review</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5/5</td>
<td>This product is so good, I bought 5 more!</td>
</tr>
<tr>
<td>Jane</td>
<td>4/5</td>
<td>Good value for the price.</td>
</tr>
<tr>
<td>David</td>
<td>1/5</td>
<td>Arrived broken :(</td>
</tr>
<tr>
<td>Fiona</td>
<td>5/5</td>
<td>I love it!</td>
</tr>
<tr>
<td>Michael</td>
<td>3/5</td>
<td>Doesn't live up to expectations.</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/7.3.1/acorn.js" integrity="sha512-4GRq4mhgV43mQBgKMBRG9GbneAGisNSqz6DSgiBYsYRTjq2ggGt29Dk5thHHJu38Er7wByX/EZoG+0OcxI5upg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/acorn-walk/7.2.0/walk.js" integrity="sha512-j5XDYQOKluxz1i4c7YMMXvjLLw38YFu12kKGYlr2+w/XZLV5Vg2R/VUbhN//K/V6LPKuoOA4pfcPXB5NgV7Gwg==" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
You can try using querySelectorAll() and map() like the following way:
function buildTableData() {
let rows = document.querySelectorAll('tbody tr');
let data = Array.from(rows).map(function(tr){
return {
rating: tr.querySelectorAll('td:nth-child(1)')[0].textContent,
review: tr.querySelectorAll('td:nth-child(2)')[0].textContent,
favoriteFood: tr.querySelectorAll('td:nth-child(3)')[0].textContent
};
});
console.log(data);
}
buildTableData();
<h2>Product reviews</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Rating</th>
<th>Review</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5/5</td>
<td>This product is so good, I bought 5 more!</td>
</tr>
<tr>
<td>Jane</td>
<td>4/5</td>
<td>Good value for the price.</td>
</tr>
<tr>
<td>David</td>
<td>1/5</td>
<td>Arrived broken :(</td>
</tr>
<tr>
<td>Fiona</td>
<td>5/5</td>
<td>I love it!</td>
</tr>
<tr>
<td>Michael</td>
<td>3/5</td>
<td>Doesn't live up to expectations.</td>
</tr>
</tbody>
</table>
You want a loop, and each review to be an object that is appended to an array of reviews is what I'm assuming
var reviews = [];
var tbody = document.querySelectorAll("tbody")[0];
var TRs = tbody.querySelectorAll("tr");
for (var a = 0; a < TRs.length; a++) {
var TDs = TRs[a].querySelectorAll("td");
var review = {
name: "",
rating: "",
review: ""
};
//These assume the order of your table columns don't change
review.name = TDs[0].innerHTML;
review.rating = TDs[1].innerHTML;
review.review = TDs[2].innerHTML;
reviews.push(review);
}
Your reviews array should have everything in there just as you wanted. I assumed the third column was "review" instead of "favorite food"
I am trying to iterate over a list of items in a Jquery Bootgrid table and extract the values to be used elsewhere. Here is my pseudo code:
for (each row in or-table) {
var code = the value in data-column-id="code";
var latitude = the value in data-column-id="lat";
var longitude = the value in data-column-id="long";
Console.log("code: " + code);
Console.log("latitude: " + latitude);
Console.log("longitude: " + longitude);
}
<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
<thead>
<tr>
<th data-column-id="code" >Symbol Code</th>
<th data-column-id="lat" >Latitude</th>
<th data-column-id="long" >Longitude</th>
</tr>
</thead>
<tbody></tbody>
</table>
I just want to loop through the rows in the table and save the values in the cells to a variable. I have been unable to find an example using Bootgrid.
You can loop through all the rows and access the elements there by which child it is.
$("#or-table tr").each(function(i, row){
var code = $(":nth-child(1)", row).html();
var latitude = $(":nth-child(2)", row).html();
var longitude = $(":nth-child(3)", row).html();
Console.log("code: " + code);
Console.log("latitude: " + latitude);
Console.log("longitude: " + longitude);
});
If not that, add class to each cell type like .code_value, .lat_value, .lng_value and access them in each() as $(row).find(".code_value").html().
Or find them by param name $(row).find("[data-column-id='code']").html()
This assumes your <td> elements have the data-column-id attributes:
$('tbody tr').each(function(idx, row) {
var code = $(row).find('[data-column-id="code"]').html();
var latitude = $(row).find('[data-column-id="lat"]').html();
var longitude = $(row).find('[data-column-id="long"]').html();
console.log("code: " + code);
console.log("latitude: " + latitude);
console.log("longitude: " + longitude);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
<thead>
<tr>
<th data-column-id="code">Symbol Code</th>
<th data-column-id="lat">Latitude</th>
<th data-column-id="long">Longitude</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column-id="code">1</td>
<td data-column-id="lat">2</td>
<td data-column-id="long">3</td>
</tr>
<tr>
<td data-column-id="code">4</td>
<td data-column-id="lat">5</td>
<td data-column-id="long">6</td>
</tr>
</tbody>
</table>
Even though you have selected an answer, the correct way to select all rows using the jQuery Bootgrid library is like this (Fiddle):
// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)
//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)
The DataTable:
<table id="employeeList" class="table table-bordered table-condensed table-hover">
<thead>
<tr>
<th data-column-id="iEmployeeId" data-type="numeric" data-visible="false" data-identifier="true" data-noresize>Id</th>
<th data-column-id="sName" data-order="desc">Name</th>
<th data-column-id="sAddress">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>dsa</td>
<td>asd</td>
</tr>
<tr>
<td>2</td>
<td>sss</td>
<td>assd</td>
</tr>
<tr>
<td>3</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>4</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>5</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>6</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>7</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>8</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>9</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>10</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
<tr>
<td>11</td>
<td>asd</td>
<td>aaaaasd</td>
</tr>
</tbody>
</table>
Then initialize BootGrid Object:
var dt = $('#employeeList').bootgrid({
selection: true,
rowSelect: true,
converters: {},
});
Then Access the Rows and the Bootgrid DataTable Object
// the DT object
console.log(dt.data('.rs.jquery.bootgrid'))
// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)
//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)
var rows = dt.data('.rs.jquery.bootgrid').rows;
for(var i = 0; i < rows.length; i++)
{
console.log(rows[i].iEmployeeId);
console.log(rows[i].sName);
}
This code does not assume the position, order nor exclusivity of the th tags within each set of tr tags.
$("tr").each(function(row){
var code = row.find("th[data-column-id='code']").text()
var latitude = row.find("th[data-column-id='lat']").text()
var longitude = row.find("th[data-column-id='long']").text()
Console.log("code: " + code);
Console.log("latitude: " + latitude);
Console.log("longitude: " + longitude);
});
I think you are looking for the BootGrid select method.
http://www.jquery-bootgrid.com/Documentation#methods
var rows = $("#or-table").bootgrid("select");
I'm playing around with trying to make tablesorter work for a simple table created using JSP and a Java Bean that reads information from the file.
Here is my jsp that creates the table:
<%
out.println("<table id=\"infoTable\" class=\"tablesorter\" border=\"1\" bgcolor=\"#57976b\" " +
"style=\"border-collapse:collapse;\">");
//Print Table Headings
out.println("<thead><tr>");
for(int i = 0; i < 19; i++) {
String par = parameters.get(i);
out.println("<td>" + par + "</td>");
}
out.println("</tr></thead>");
out.println("<tbody>");
ArrayList<String> values = fileBean.getAllValues();
for(int i = 0; i < values.size(); i++) {
if(i%19 == 0) {
out.println("<tr>");
}
out.println("<td>" + values.get(i) + "</td>");
if(values.get(i).contains("grading") && i%19 != 0) {
out.println("</tr>");
}
}
out.println("</tbody>");
out.println("</table>");
%>
With this script in my <head> tag:
<script>
$(document).ready(function() {
$("#infoTable").tablesorter();
})
</script>
And here is the HTML created using inspect element on the said page:
<table id="infoTable" class="tablesorter" border="1" bgcolor="#57976b" style="border-collapse:collapse;">
<thead><tr>
<td>Grading</td>
<td>Teaching</td>
<td>Name</td>
<td>Title</td>
<td>Home Address</td>
<td>Additional Details</td>
<td>Course Name</td>
<td>Course Credits</td>
<td>Student ID</td>
<td>Additional Duties</td>
<td>Details</td>
<td>Course Grade</td>
<td>Phone Number</td>
</tr></thead>
<tbody>
<tr>
<td>1 </td>
<td>1 </td>
<td>John Doe</td>
<td>Student </td>
<td>Home Address </td>
<td>Web Development! </td>
<td>SWE 432 </td>
<td>4 </td>
</tr>
</tbody>
</table>
The values don't match the headers as this is just an example. I have included <thead> and <tbody> appropriately and the table looks just how I want it. Any idea why tablesorter is not recognizing my table?
http://jsfiddle.net/9sKwJ/66/
tr.spacer { height: 40px; }
$.tablesorter.addWidget({
id: 'spacer',
format: function(table) {
var c = table.config,
$t = $(table),
$r = $t.find('tbody').find('tr'),
i, l, last, col, rows, spacers = [];
if (c.sortList && c.sortList[0]) {
$t.find('tr.spacer').removeClass('spacer');
col = c.sortList[0][0]; // first sorted column
rows = table.config.cache.normalized;
last = rows[0][col]; // text from first row
l = rows.length;
for (i=0; i < l; i++) {
// if text from row doesn't match last row,
// save it to add a spacer
if (rows[i][col] !== last) {
spacers.push(i-1);
last = rows[i][col];
}
}
// add spacer class to the appropriate rows
for (i=0; i<spacers.length; i++){
$r.eq(spacers[i]).addClass('spacer');
}
}
}
});
$('table').tablesorter({
widgets : ['spacer']
});
<table id="test">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Another Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test4</td>
<td>4</td>
<td>Hello4</td>
</tr>
<tr>
<td colspan="3">Test4</td>
</tr>
<tr>
<td>Test3</td>
<td>3</td>
<td>Hello3</td>
</tr>
<tr>
<td colspan="3">Test3</td>
</tr>
<tr>
<td>Test2</td>
<td>2</td>
<td>Hello2</td>
</tr>
<tr>
<td colspan="3">Test2</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>Hello1</td>
</tr>
<tr>
<td colspan="3">Test1</td>
</tr>
</tbody>
</table>
This sorts just the way I want it if you sort it by the first column, but the other two columns don't maintain the same paired 'tr' sort im looking for.
Any help on this?
Use the expand-child class name on each duplicated row:
<tr>
<td>Test3</td>
<td>3</td>
<td>Hello3</td>
</tr>
<tr class="expand-child">
<td colspan="3">Test3</td>
</tr>
It's defined by the cssChildRow option:
$('table').tablesorter({
cssChildRow: "expand-child"
});
Here is a demo of it in action.