How to get rows of specific table and cells of specific row only - jquery-selectors

I have table with id parentTable. Also there is child table in the third column of every row. When i count the length of rows of parent table it gives me sum of rows of parent and child table. Also this happens with the tds. How do i achieve this for getting/iterating rows of parent table only and interating tds of parent rows only. I tried $('parentTable >tbody>tr') but not worked for me. Please assist. Below is the sample.
<table id="parentTable"><tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
</td>
</tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
</td>
</tr>
</table>

You can assign different classes to the rows (tr s) of the parent table, and the child table. And use those classes for selecting them. You can do the same for the cells (tds) too.
For example, you if your table looks like -
<table class="parentTable">
<tr class="parentRow">
<td class="parentCell">Cell 1</td>
<td class="parentCell">Cell 2</td>
<td class="parentCell">
<table class="childTable">
<tr class="childRow">
<td class="childCell">Cell 31</td>
<td class="childCell">Cell 32</td>
<td class="childCell">Cell 33</td>
</tr>
</table>
</td>
</tr>
</table>
In your jquery, to get just the parent rows and their cells you can use
$.each($(".parentRow"), function() {
$.each($(this).find(".parentCell"), function() {
//Do Something
});
});

Related

What I do select first/second or forth td content with XPath

<table class="attributes">
<tbody>
<tr>
<td class="label title"><b>scale</b></td>
<td class="value">1/48</td>
<td class="label title"><b>products</b></td>
<td class="value">Plastic kits</td>
</tr>
<tbody>
</table>
Hit a brain block on this one...
Trying to capture specific values within the td's. So the first time around I'll grab the first, then the second and so on...
//table[#class='attributes']/tbody/tr//descendant::td[#class='value']
Gives me all the td values how to select only the 2nd or 3rd.
I've tried:
"//table[#class='attributes']/tbody/tr//descendant::td[#class='value']/td[2]"
With no success.
For example:
$x("//*[#class='attributes']/tbody/tr/td[#class='value']")
finds me
[<td class=​"value">​1/48​</td>​, <td class=​"value">​Plastic kits​</td>​, <td class=​"value">​Limited edition​</td>​, <td class=​"value">​Aircraft​</td>​, <td class=​"value">​Eduard​</td>​, <td class=​"value">​0.5 kg​</td>​]
So then I changed the XPath to:
$x("//*[#class='attributes']/tbody/tr/td[#class='value'][1]")
adding the [1] and what it does is returns
[<td class=​"value">​1/48​</td>​, <td class=​"value">​Limited edition​</td>​, <td class=​"value">​Eduard​</td>​]
To select all of the class='value' td elements beneath the class='attributes' table:
/table[#class='attributes']//td[#class='value']
selects:
<td class="value">1/48</td>
<td class="value">Plastic kits</td>
To select just the second such td:
(/table[#class='attributes']//td[#class='value'])[2]

Using TinyMCE with handlebars template

I am trying to use TinyMCE to allow my users to modify a handlebars report template. The template contains several elements that are not valid to TinyMCE and they are being moved around. See the {{#each data}} and {{/each}}
Here is good HTML code for my handlebars template:
<table class="table table-bordered">
<thead>
<tr>
<th><h4>Item</h4></th>
<th><h4 class="text-right">Quantity</h4></th>
<th><h4 class="text-right">Rate/Price</h4></th>
<th><h4 class="text-right">Sub Total</h4></th>
</tr>
</thead>
<tbody>
{{#each Details}}
<tr>
<td>{{Item}}<br><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
After I past the code into TinyMCE, it results to the following:
{{#each Details}}{{/each}}
<table class="table table-bordered">
<thead>
<tr><th>
<h4>Item</h4>
</th><th>
<h4 class="text-right">Quantity</h4>
</th><th>
<h4 class="text-right">Rate/Price</h4>
</th><th>
<h4 class="text-right">Sub Total</h4>
</th></tr>
</thead>
<tbody>
<tr>
<td>{{Item}}<br /><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
</tbody>
</table>
Has anyone ran across a plugin or something else that may help me?
I just ran into this... I have an order confirmation email that I need to be configurable with a list of order items in a table; same issue.
I did just realize I probably shouldn't be using tables anyway, since they are not responsive, but I ultimately was able to solve the problem with HTML comments, like this:
<tr style="font-weight: bold;">
<td style="width: 145px;">Qty</td>
<td>Item</td>
<td>Unit Price</td>
<td>Total</td>
</tr>
<!--{{#order.line_items}} -->
<tr repeat="">
<td style="width: 145px;">{{quantity}}</td>
<td>{{product.name}}</td>
<td>{{currency unit_price}}</td>
<td>{{currency total}}</td>
</tr>
<!--{{/order.line_items}} -->
<tr>
<td style="width: 145px;"> </td>
<td> </td>
<td><strong>Subtotal:</strong></td>
<td>{{currency order.subtotal}}</td>
</tr>
I was able to use a custom attribute on my Element and use:
<tr repeat="{{#each Details}}">
</tr repeat="{{/each}}">

Footable sorting with colspan rows

I have a sorting issue when using rows with colspans when sorting a Footable table.
My table structure:
<table class="table footable">
<thead>
<tr>
<th>Name</th>
<th data-type="numeric">Date of Birth</th>
<th>Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>Bill Smith</td>
<td data-value="315532800">1/1/1980</td>
<td>England</td>
</tr>
<tr>
<td colspan="3">Some long description of Bill<td>
</tr>
<!-- Many, many other rows -->
</tbody>
</table>
I have a checkbox to toggle the colspan rows on/off, but if they're displayed and you sort by a column, all the colspan rows are grouped together.
JSFiddle demo
Is there a way to sort that correctly places the colspan (description) row beneath the correct data row?
I've managed to solve this with Javascript (using jQuery).
Basically I'm hiding the "description" rows by default (in CSS), I have a checkbox to toggle their visibility.
My javascript hooks into Footable's sorted (after sorting) event and basically moves the description rows around so they're always below the "data" row.
$('#details').footable().bind({
'footable_sorted': function(e) {
var rows = $('#details tbody tr.data');
rows.each(function()
{
var personid = $(this).data('row-person');
var detail = $('#details tbody tr.descriptions[data-detail-person="'+ personid +'"]');
$(detail).insertAfter($(this));
});
}
});
I also had to add additional markup to my table (classes/ids) to enable this.
See my Fiddler demo for full details.
Tested with up to 370 rows and gives acceptable performance.
I'm sure my HTML/JS could be stream-lined further.
So the root of the problem is that the description row is a separate row and is not "linked" with the data row above it. The only way a user would know what data row the description row belongs to is the order of the rows. Once you sort the table, the order changes and you can no longer count on the order to link the data and description rows. (Wow that's kind of hard to read. My apologies in advance...)
So, one way to solve this is to have the data and description rows both contained in the same row.
<table>
<thead>
<tr>
<th>Name</th>
<th data-type="numeric">Date of Birth</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Bill Smith</td>
<td data-value="315532800">1/1/1980</td>
<td>England</td>
</tr>
<tr>
<td colspan="3">Some long description of Bill</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>John Smith</td>
<td data-value="315532800">1/1/1980</td>
<td>France</td>
</tr>
<tr>
<td colspan="3">Some long description of John</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Here's a plunk that shows this in action: http://plnkr.co/edit/NvmUgzvaAix1x7WUGYSM
This is a fix for rows with colspan: $('table.footable').find('td[colspan]').siblings().remove();

Align images in github-flavored-markdown

I have these badges in my Github repo:
How can I make them align to left (the 2 above) and to right the one under?
They are in the format ![description](url)
One way would be to use html table (since markdown table in GFM doesn't support merged cell)
this, for instance, seems to align the pictures properly within a README.md file.
<table >
<tr>
<td align="left"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/add-icon.png"/></td>
<td align="right"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/info-icon.png"/></td>
</tr>
<tr>
<td colspan="2"><img src="http://icons.iconarchive.com/icons/shwz/disney/512/pumbaa-icon.png"/></td>
</tr>
</table>
Result:
In your case:
<table>
<tr >
<td><img src="https://api.travis-ci.org/axemclion/grunt-saucelabs.png?branch=master"/></td>
<td align="right"><img src="https://saucelabs.com/buildstatus/grunt-sauce"/></td>
</tr>
<tr>
<td colspan="2"><img src="https://saucelabs.com/browser-matrix/grunt-sauce.svg"/></td>
</tr>
</table>
Which gives:

create a table in td using zend decorator

I am using zend forms and zend decorators.
I want to create a sub-table in a parent table's td. like this:
<table>
<tr>
<td>Username:</td>
<td>
<table>
<tr>
<td> <input type="text"> </td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr>
</table>
How can i create this table.
can anyone help me plz.
This might not be the best solution, as you maybe able to create your own decorator to render the form (with the sub-tables). But you could always render each form element individually, using the renderViewHelper() function
<table>
<tr>
<td>Username:</td>
<td>
<table>
<tr>
<td><?php echo $this->form->username->renderViewHelper() ?></td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr> <tr>
<td>AnotherElement:</td>
<td>
<table>
<tr>
<td><?php echo $this->form->anotherElement->renderViewHelper() ?></td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr>
</table>