Im trying to give child elements a class per group. So each groups children will have the same class for each group, and each element should have a different class.
This is what i got so far:
var $span = $("tr.keep td");
$span.attr('id', function (index) {
return 'td' + index;
});
The problem is that I have multiple groups of the same parent - this script runs trough all of them instead repeating the class for each group. How do I ad something like .each on this script, or is it a better way?
HTML:
<tr class="keep">
<tr class="test">
<td rowspan="2"><img src="/" alt=""></td>
<td colspan="3">text</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td><input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')"></td>
</tr>
</tr>
<tr class="keep">
<tr class="test">
<td rowspan="2"><img src="/" alt=""></td>
<td colspan="3">text</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td><input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')"></td>
</tr>
</tr>
Use tr.test selector to select all the tr elements having class as .test. Iterate this selected elements using .each and find td elements which are children of selected-tr elements. Loop through td elements and and add class using .addClass considering the index.
Note: tr elements can not have tr as its children. That will be invalid-markup
var $span = $("tr.test");
$span.each(function(i, elem) {
$(elem).find('td').each(function(index) {
$(this).addClass(function() {
return 'td_' + (index + 1);
});
});
});
.td_1 {
background: yellow;
}
.td_2 {
background: green;
}
.td_3 {
background: pink;
}
.td_4 {
background: orange;
}
.td_5 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr class="keep">
<td rowspan="2">
<a href="/">
<img src="/" alt="">
</a>
</td>
<td colspan="3">text
</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td>
<input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
</td>
</tr>
<tr class="keep">
<td rowspan="2">
<a href="/">
<img src="/" alt="">
</a>
</td>
<td colspan="3">text
</td>
</tr>
<tr class="test">
<td>MF216N/A</td>
<td>Apple</td>
<td class="outofstock">0</td>
<td>1 054,24SEK</td>
<td>
<input type="button" class="actionbutton" value="Köp" onclick="buy(this, 65360, null, null,null, '/ajax/buy')">
</td>
</tr>
</table>
Fiddle Demo
user can use parent element index for add unique id for each child
$("tr.keep").each(function (parentIndex) {
$(this).find('td').each(function (childIndex) {
$(this).attr('id', parentIndex + '' + childIndex)
})
});
Related
I'm trying to get all the tds in a table that contain a tr with a button to which I have specified an attribute ("boolean") with a true or false value. I need to get each td that have that attribute with value true but I can't figure out how to get it using jquery.
The structure would be the following:
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
I have tried to do something like this:
function colour() {
$("#table tbody tr").each(function() {
let colour = $(this).children("td")[1];
}
}
But I can't go from there to get those td since I have no experience with jquery
How could I get the td with row-id 1 and 3 with Jquery and then apply a style to those td?
Thanks in advance
Use a has selector with attribute selector
var trs = $('tr:has(button[boolean="true"])');
console.log(trs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
$("#table tbody tr").each(function() {
//Filter to iterate those td's which contain Boolean true
if($(this).find('button').attr('boolean')=="true"){
let colour = $(this).children("td")[1];
colour.style.backgroundColor="red";
console.log(colour);
}
})
I have the following function. I am trying to remove all <img> tags and only the second row from table that is inside this data. The code and selectors work fine in console but I don't get the result in data variable after replacing all things.
function fetchDetails(URLToRead, email) {
$.get(URLToRead, function (data) {
console.log(data);
var imgTags = $(data).find('img');
$.each(imgTags, function (i,v) {
$(v).remove();
});
$(data).find('table tr:nth-child(2)').remove();
console.log(data);
});
}
URLToRead content:
<TABLE>
<TR>
<TD>
<span></span>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD ><span ></TD>
</TR>
<TR>
<TD height="12" colSpan="4"><IMG src="../images/spacer.gif" width="20" height="7"></TD>
</TR>
</TABLE>
The problem is that .remove() works on elements that are in the DOM. Your data is never added to the DOM.
You can create a div with display: none and then perform the needed operations to it:
let data = `
<TABLE>
<TR>
<TD>
<span></span>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD ><span ></TD>
</TR>
<TR>
<TD height="12" colSpan="4"><IMG src="../images/spacer.gif" width="20" height="7"></TD>
</TR>
</TABLE>
`
let tempDiv = $("<div style='display: none;'></div>")
$("body").append(tempDiv)
$(tempDiv).append(data)
$(tempDiv).find('img').remove();
$(tempDiv).find('table tr:nth-child(2)').remove();
console.log($(tempDiv).html())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have the following format for an html table (modified a bit to post here)...
<table class="table-style" id="tbl1">
<tbody>
<tr>
<th>SBU</th>
<th>DEPARTMENT</th>
<th>TY SLS</th>
<th>TY BUD</th>
</tr>
<tr>
<td class="parent" rowspan="14">test0</td>
<td class="child" style="display: table-cell;">test1</td>
<td class="child" style="display: table-cell;">106040943</td>
<td class="child" style="display: table-cell;">117638617</td>
</tr>
<tr>
<td class="child">test2</td>
<td class="child">20733153</td>
<td class="child">22164885</td>
</tr>
<tr>
<td class="child">25 test3</td>
<td class="child">49086765</td>
<td class="child">53820000</td>
</tr>
<tr>
<td class="child">test4</td>
<td class="child">30627906</td>
<td class="child">34237662</td>
</tr>
<tr>
<td class="parent" rowspan="8">test5</td>
<td class="child">test6</td>
<td class="child">120112816</td>
<td class="child">126211000</td>
</tr>
<tr>
<td class="child">test7</td>
<td class="child">66521923</td>
<td class="child">78090000</td>
</tr>
</tbody>
</table>
I am using the following JavaScript to collapse rows that have the class of 'child' from the parent class...
<script>
$(document).ready(function () {
function getChildren($row) {
var children = [];
while ($row.next().hasClass('child')){
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function () {
var children = getChildren($(this));
$.each(children, function () {
$(this).toggle();
})
});
})
</script>
However, it is only getting the first row...how can I get all rows to collapse until i reach the next parent class?
Assuming that the actual rowspan values are not correct in your example (they have too large values), this could be a solution (I corrected those values in the sample table):
$(document).ready(function () {
$('.parent').on('click', function () {
var $row = $(this).parent();
var rowspan = +$(this).attr('rowspan') || 1;
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.child').toggle();
});
});
.table-style, th, td { border: 1px solid }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-style" id="tbl1">
<tbody>
<tr>
<th>SBU</th>
<th>DEPARTMENT</th>
<th>TY SLS</th>
<th>TY BUD</th>
</tr>
<tr>
<td class="parent" rowspan="4">test0</td>
<td class="child" style="display: table-cell;">test1</td>
<td class="child" style="display: table-cell;">106040943</td>
<td class="child" style="display: table-cell;">117638617</td>
</tr>
<tr>
<td class="child">test2</td>
<td class="child">20733153</td>
<td class="child">22164885</td>
</tr>
<tr>
<td class="child">25 test3</td>
<td class="child">49086765</td>
<td class="child">53820000</td>
</tr>
<tr>
<td class="child">test4</td>
<td class="child">30627906</td>
<td class="child">34237662</td>
</tr>
<tr>
<td class="parent" rowspan="2">test5</td>
<td class="child">test6</td>
<td class="child">120112816</td>
<td class="child">126211000</td>
</tr>
<tr>
<td class="child">test7</td>
<td class="child">66521923</td>
<td class="child">78090000</td>
</tr>
</tbody>
</table>
Try jQuery nextUntil() function. Pass in the parent class and you'll get the results you're looking for.
https://api.jquery.com/nextUntil/
I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?
why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO
the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});
update: almost done! problem is that the productrow im trying to grouop gets divided into two groups: https://jsfiddle.net/g3zrh5y5/1/
I have a HTML table that I would like to convert and group to divs. I have dont his succesfully with tableanarchy.js (http://codepen.io/KurtWM/pen/AJpEw) on another table on my site, but on this table the setup is a bit different and I cant make it to work.
I need to remove the divider table row, and group the rest in divs as the example shows. Any idea how I do this?
<tbody>
<tr>
<td class="unfoldedlabel" colspan="6"><a href="javascript://" name=
"_ec_pd6_cc/cL" id="_ec_pd6_cc/cL" onclick=
"if( UI.pb_boolean(this, 'click') ) {} return false;">Backup/datalagring/Raid
Controllers</a></td>
</tr>
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (1GB)</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534562-B21</td>
<td>HP</td>
<td>0</td>
<td>4 127,97SEK</td>
<td><input type="button" id="rpb13804" class="actionbutton" value="KÖP NU"
onclick="buy(this, 13804, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
//remove this ---->
<tr>
<td class="divider" colspan="6"></td>
</tr>
//end remove ---->
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs/9248a5f8-1a45-40c1-b254-52ab24881150/40/40" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (512MB) - for ProLiant
BL460c G7, BL620C G7, BL680c G7, DL165 G7, DL360 G7, DL370 G6, DL980 G7, ML110
G7</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534916-B21</td>
<td>HP</td>
<td>0</td>
<td>3 260,99SEK</td>
<td><input type="button" id="rpb28314" class="actionbutton" value="KÖP NU"
onclick="buy(this, 28314, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
</tbody>
Just iterate the table rows and exclude the rows you don't need. Here is a working fiddle
$(document).ready(function(){
$('.group-btn').click(function(){
// Lets create the main div
var div = $('<div />', {id: '#myDiv', class: 'new-div'});
// Let's start iterating the body rows
$('.myTable tbody tr').each(function(index, row) {
// Exclude divider rows
if(!$(row).hasClass('divider')) {
// Let's iterate the columns of the row
$(row).find('td').each(function(index, column){
// This is a simple example that extract the column text that's why i create a simple <p> tag
// Let's exclude tds that have "exclude" class
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
});
}
});
// And finally we append the div to the "append-here" div
$('.append-here').append(div)
});
});
table {
border: 1px solid black
}
table tr td{
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="group-btn">Click me!</button>
<table class="myTable">
<thead>
<tr>
<th>col 1-1</th>
<th>col 2-1</th>
<th>col 3-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1-2</td>
<td class="exclude">Val 2-2</td>
<td>Val 3-2</td>
</tr>
<tr>
<td>Val 1-3</td>
<td>Val 2-3</td>
<td class="exclude">Val 3-3</td>
</tr>
<tr class="divider">
<td colspan="3">DIVIDER</td>
</tr>
<tr>
<td>Val 1-5</td>
<td>Val 2-5</td>
<td>Val 3-5</td>
</tr>
</tbody>
</table>
<div class="append-here">
<p>Here is where you append the divs</p>
</div>
I've made a little change: the "divider" class is in the tr and not in the td
* UPDATE *
I've added this line of code
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
That permits you to check whatever class you need to check in order to include/exclude tds elements