Develop Reference

Jquery trying to get value from inner table inside tr

<tr role="row" class="odd">
<td style="background-color:white">
<table>
<tbody>
<tr data-row-id="22">
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)" style="display:none">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0">
<table>
----
</table>
</td>
</tr>
I am using jQuery datatable and in each row I have tables with inner tables.
I am able to get the required table from the datatable list using:
$(this).closest('table').closest('table tr')[0]
But I am not able to get the pid value which is inside
<label class="pid 8843">
I want to find the pid value. Each row has different pid values. For example:
<label class="pid 2">
<label class="pid 3">
<label class="pid 4">
...
I have found the correct tr in which my pid value resides but how to get the pid value is a problem.
Any help would be appreciated.

if the structure is same in you table, just target label and class to get that attr,, like this:
:EDIT (target input, even better)
$( $(this).closest('table').closest('table tr')[0] ).find('input').val()
try again please

Try this:
$('button').closest('table').find('tr:first td:first').find('label').attr('class')
console.log($('button').closest('table').find('tr:first td:first').find('label').attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>

Two column checkboxes layout using just css

The following code is a dynamically generated part of a form and I only can style it using css.
No html changes but for the names of the classes with the exception of: classes "element" and "formField" as they are used as common classes for other elements in the form.
The layout I am looking for is a two column label-checkbox. As you can see in the code, I have 4 label-checkbox items. I need item 0 and 1 in a column and in another column next to it, item 2 and 3.
I know the tables should be gone for good, I agree but please help me here, I am going to build the whole site again but I don't have the time just yet.
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>

You can use the CSS float and clear in order to do that. Here is an example.
.element{
float:right;
}
.element:nth-child(odd){
clear:right;
}
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>

If you can style the parent element of those four divs, you can set
.parent {
columns: 2;
}
This will work in IE10+. https://jsfiddle.net/c979dxLe/1/
You can also set the width of the columns. Docs: https://developer.mozilla.org/nl/docs/Web/CSS/columns

I did this for some md-checkboxes in my parent div, and they are column-first ordered! Like this:
1 4
2 5
3
CSS:
.parent {
columns: 2;
}
.parent > * {
width: 100%;
}

Move table columns from one row into another

I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
Thank you so much for your help!

You may add to your css the following rule:
#options tr {
display: inline-table;
}
If you want to achieve the same result with jQuery you can write:
$('#options tr').css('display', 'inline-table');
Instead, if you need to move the sub table content to the upper table you can:
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
The snippet (css solution):
#options tr {
display: inline-table;
}
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight" >
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
The snippet (jQuery solution):
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>

Dijit form horizontalSlider is getting loaded for first time only?

I am using dojo scripts for creating charts, for zooming and panning I have used dijit slider. First time sliders are getting loaded correctly but second time( after coming back form another page) chart is getting loaded except these Sliders. Using Jquery for event handling. After refreshing page it's working fine.
First time the CSS is
<table>
<tbody>
<tr>
<td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span></td></tr>
<tr>
<td>
<table widgetid="scaleXSlider" id="scaleXSlider" style="width: 450px;" class="dijit dijitReset dijitSlider dijitSliderH" rules="none" data-dojo-attach-event="onkeydown:_onKeyDown, onkeyup:_onKeyUp" role="presentation" border="0" cellpadding="0" cellspacing="0" lang="en">
<tbody>
<tr class="dijitReset"><td class="dijitReset" colspan="2">
<td data-dojo-attach-point="topDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH"></td>
<td class="dijitReset" colspan="2"></td>
</tr>
<tr class="dijitReset">
<td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
<div class="dijitSliderDecrementIconH" style="display:none" data-dojo-attach-point="decrementButton">
<span class="dijitSliderButtonInner">-</span>
</div>
</td>
<td class="dijitReset">
<div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper" data-dojo-attach-event="press:_onClkDecBumper"></div>
</td>
<td class="dijitReset">
<input value="1" data-dojo-attach-point="valueNode" type="hidden">
<div class="dijitReset dijitSliderBarContainerH" role="presentation" data-dojo-attach-point="sliderBarContainer">
<div style="width: 0%;" role="presentation" data-dojo-attach-point="progressBar" class="dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH" data-dojo-attach-event="press:_onBarClick">
<div class="dijitSliderMoveable dijitSliderMoveableH">
<div aria-valuenow="1" tabindex="0" aria-valuemax="5" aria-valuemin="1" data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider"></div>
</div>
</div>
<div style="width: 100%;" role="presentation" data-dojo-attach-point="remainingBar" class="dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH" data-dojo-attach-event="press:_onBarClick">
</div>
</div>
</td>
<td class="dijitReset">
<div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper" data-dojo-attach-event="press:_onClkIncBumper"></div>
</td>
<td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
<div class="dijitSliderIncrementIconH" style="display:none" data-dojo-attach-point="incrementButton">
<span class="dijitSliderButtonInner">+</span>
</div>
</td>
</tr>
<tr class="dijitReset">
<td class="dijitReset" colspan="2"></td>
<td data-dojo-attach-point="containerNode,bottomDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH">
</td>
<td class="dijitReset" colspan="2"></td>
</tr>
</tbody>
</table>
and for the second time it's like,
<table>
<tbody><tr><td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
<tr><td>
<div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" value="1" minimum="1" maximum="5" discretevalues="6" showbuttons="false" style="width: 450px;">
</div>
</td></tr></table>
All the css classes are not getting loaded for the second time.Could you please help me :(.

Dojo keeps track of the objects / widgets it creates by the specified id. If you run the parser again on an object with the same id, dojo tries to create a second instance, but there is already one, so it should throw an error in your js console.
Destroy the created widget/object ids before you parse the same page again. Here I have declared 'widgets' as global variable, so that if any widgets ids are there just destroying them before parsing.
if(widgets){
widgets.forEach(function(widget) {
widget.destroyRecursive();
});
}
widgets = dojo.parser.parse();
It's worked for me.
for more details, refer the link below
Used dijit css in two pages, but working in first page only, in second page getting blank page

jquery animate() and slideUp() don't work in IE8

I'm animating table rows to slide up when deleting them, with jquery, which is cool in FF, Safari and Chrome. But surprise, suprise...!! It doesn't work in IE8. The worst thing is that IE8 doesn't show any error, so how am I supposed to debug.
Also I know tables are problematic when it comes to effects. That's why I replaced tr with a div using replaceWith().
Here's my jquery:
$('.remove').live('click', removeRowSlider);
function removeRowSlider(e){
var thisElem = $(this);
if( thisElem.hasClass('remove') ){
var tr = thisElem.closest('tr').parents('tr'),
supportDiv = $('<div style="height: 30px; width: 470px">').css({'height': tr.height()});
tr.animate({'opacity': 0.2}, function(){
tr.replaceWith(supportDiv);
supportDiv.slideUp(400, function(){
$(this).remove();
});
});
}
e.preventDefault();
}
HTML:
<table>
<thead>
<tr>
<th class="first-td">Item(s)</th>
<th class="qty-col">Qty</th>
<th class="price-col">Price</th>
<th class="price-col">Subtotal</th>
<th class="del-opt">Delivery options</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Thanks for your help...

When it comes to IE, nothing surprises me!
I don't know if this works with your example, but sometimes I've had problems appending elements without an end-tag. So you could try this:
supportDiv = $('<div style="height: 30px; width: 470px;"></div>')...
Hope it works out for you!