I am trying to change color where first td contain Test1 word in here able to change color. But When I put test1 on coding here not changing color. Is there any way whether contain word in small or capital?
$("#X td:contains('Test1')").parents('tr').find("td:first").css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
You can use filter with regex.
// $("#X td:contains('/test1/i')").parents('tr').find("td:first").css("background-color", "red");
const matchTEST = /test/i;
$('#X td').filter((i, e) => matchTEST.test(e.innerText)).parent('tr').find("td:first").css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "X">
<tr >
<td>matchTEST</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr >
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr >
<td>matchTEST</td>
<td>c</td>
<td>c</td>
</tr>
</table>
you can override jQuery contain to make it Case-Insensitive :
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
$("#X td:contains('Test3')")
.parents('tr')
.find("td:first")
.css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
<tr> <td>test1</td> <td>test2</td> <td>test3</td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> </tr>
</table>
You can use this selector combine :contains and :first
$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');
$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "X">
<tr >
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
`
You can filter the elements with a javascript function that uses a case-insensitive regex
var re = /test1/i;
$("#X td")
.filter((i, el) => re.test(el.innerHTML))
//.parents('tr').find("td:first")
.css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
<tr>
<td>nope</td>
<td>test1</td>
<td>Test1</td>
<td>test2</td>
<td>protest1</td>
</tr>
</table>
Related
I have a table that is already defined and populated. Now what I'm trying to do is to find a specific column and after that create a new column, at the moment I have the code to handle this:
$(document).ready(function() {
something();
});
function something() {
var newTh = "";
var th = $(`#tblTable th[data-something="1"]`).last();
newTh = `<th data-something="1-1">
New Column
</th>`;
th.after(newTh);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
The column is added properly but it's keeping the value from the pre-existing column. What can I do to move the content after/before adding a new column?
You can get the index of th element, and then you can find each tr to append New Column td value. Like below:
$(document).ready(function() {
something();
});
function something() {
var newTh = "";
var th = $(`#tblTable th[data-something="1"]`).last();
var index = th.index();
newTh = `<th data-something="1-1">New Column</th>`;
th.after(newTh);
$("#tblBody").find("tr").each(function(){
var tr = $(this);
tr.find("td").eq(index).after(`<td>new column value</td>`);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
The easiest method would be to add another <td> in each <tr> and copy the text into the new <td>.
This works because each <th> must be at the same index as each <tr>.
$(document).ready(function() {
something();
});
function something() {
const th = $('#tblTable th[data-something="1"]').last();
th.after('<th data-something="1-1">New Column</th>');
$('#tblTable tbody').children().each(function() {
$(this).children().eq(th.index()).after('<tr></tr>');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
I have the table and with fields id,name,geo,age I want to collect name,id and age of the table which have the geo ME.
name= ["a","b","c"]
id= ["1","2","3"]
age =["30","20","42"]
$(document).ready(function(){
/*$(#geo tbody).find('tr').each(function( index ){
console.log($(this).find(td:1));
}); */
name= new Array();
$('#geo tbody').find('tr').each(function( ) {
// console.log($( this).find(':nth-child(3)').text());
if ($( this).find(':nth-child(3)').text()=='ME'){
val= $( this).find(':nth-child(2)').text() ;
name=$( this).find(':nth-child(2)').text() ;
}
//console.log(name);
});
console.log(name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
I want to insert the value in array .now I can get only the last data.how to push the value in an array in each loop
You can simply use .push to push values inside arrays.
Demo Code :
$(document).ready(function() {
var age =[];
var name = [];
var id = [];
$('#geo tbody').find('tr').each(function() {
if ($(this).find(':nth-child(3)').text() == 'ME') {
id.push($(this).find(':nth-child(1)').text());//push same
name.push($(this).find(':nth-child(2)').text());
age.push($(this).find(':nth-child(4)').text())
}
});
console.log(name);
console.log(id);
console.log(age);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Firstly, you need to add var in name = new Array();:
var name = new Array();
Next, you need to use the .push() function to add data to the array:
name.push($(this).find(':nth-child(2)').text());
Here is an example of plain JavaScript version ....
const id = [];
const name = [];
const age = [];
// get the tr in the tbody
document.querySelectorAll('#geo tbody tr').forEach(tr => {
id.push(tr.children[0].textContent);
name.push(tr.children[1].textContent);
age.push(tr.children[3].textContent);
});
console.log(id, name, age);
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
I would like to hide with javascript a specific child :
#table-detail > tbody > tr:nth-child(10)
based on the content of another specific preceding child :
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)
I can hide the child as followed :
$('#table-detail > tbody > tr:nth-child(10)').css('display', 'none');
but I have no clue how to check the content of the preceding child (if child element
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)" content == 'Tarte-fine
then hide child element X.
Please find hereafter the table :
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <-CONTENT TO CHECK IN THIS CHILD ELEMENT
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <- CHILD ELEMENT TO HIDE
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
You need to use :contains() selector that select element has special text content.
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('display', 'none');
Also you can simplify the code and use :eq() selector instead of :nth-child
$('#table-detail tr:eq(6) td:eq(1):contains("Tarte-fine")').css('display', 'none');
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>
Note that :contain() return unwanted result in some case, so you can use .filter() instead
$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
return $(this).text() == "Tarte-fine";
}).css('display', 'none');
You could check if that cell contains the specific text using :contains and hide that other cell using hide():
$(function() {
var found = $("#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains(Tarte-fine)").length > 0;
if (found) {
$("#table-detail > tbody > tr:nth-child(10)").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td>
<!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr>
<!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>
As an alternative this is the code to do what you need without using jquery.
This is by the way a more solid solution since you don't need to know the numerical order of both of the rows that contain the cell you want to check and the cell you want to hide.
const rows = document.getElementsByTagName('tr');
let textToCheck = 'Tarte-fine';
let childTextOfTheElementToHide = 'Taille (cm)';
let check = Object.keys(rows).filter(key => {
return rows[key].children[1].innerHTML === textToCheck
});
if(check.length > 0){
let hide = Object.keys(rows).filter(key => {
return rows[key].children[0].innerHTML === childTextOfTheElementToHide
});
rows[hide].style.display = 'none';
}
I would like to add a new element with jQuery with DOM-manipulation but I'm a little bit confused with all the functions like eq, nth and so on.
Here is my base construct:
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
Here should be the DOM-Manipulation
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
Where the "Here should be the DOM-Manipulation" I would like to insert a new tablerow.
Use this:
$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');
.tableInput{border:1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
You need to use .after
$(document).ready(function(){
$tr = '<tr><td>Hello</td></tr>';
$('#myTable tr:first').after($tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput" id="myTable">
<tr>
<td></td>
</tr>
</table>
You can add table row with following ways :
1. Via append :
a. Without declaring element before :
$("#tableInput").last().append('<tr><td></td></tr>');
b. With declaring element :
var tableRow = $('<tr><td></td></tr>');
$("#tableInput").last().append(tableRow);
Via after :
var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);
Just append a new table row to the last <table> element like this
$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')
table{
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td>A</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>B</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>C</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>D</td>
</tr>
<!--Here should be the DOM-Manipulation !-->
</table>
<table class="tableInput">
<tr>
<td>E</td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
I have this code
<table>
<tr id="groupItem-12863">
<td>10</td>
<td class="selCost">34</td>
</tr>
<tr id="groupItem-12863">
<td>20</td>
<td class="selCost">5</td>
</tr>
<tr>
<td>14</td>
<td class="selCost">23</td>
</tr>
<tr id="groupItem-73632">
<td>28</td>
<td class="selCost">8</td>
</tr>
<tr id="groupItem-73632">
<td>54</td>
<td class="selCost">55</td>
</tr>
<tr id="groupItem-73632">
<td>13</td>
<td class="selCost">99</td>
</tr>
<tr>
<td>18</td>
<td class="selCost">55</td>
</tr>
<tr>
<td>99</td>
<td class="selCost">66</td>
</tr>
</table>
I want a jquery selector where I can loop over the group of id and fetch the value of td cell. Note: the tr id are generated dynamically and can have none or N rows for each group of id. For example (groupItem-12863 has 2 and groupItem-73632 has 3 rows)
Even if the following solution should do what you are expecting, I strongly suggest you to change the id to another attribute, a custom one like group-id or use CSS classes. By the way:
$(function() {
var groupedRows = {};
$.each($('tr[id^=groupItem]'), function() {
if (groupedRows[$(this).attr('id')]) {
groupedRows[$(this).attr('id')].push($(this));
}
else {
groupedRows[$(this).attr('id')] = [$(this)];
}
});
console.log(groupedRows);
});
HTML must not have same ids, it will be better to use class for your use-case.
After this you can get the elements with a given class and loop over them like
$(function(){
$('.groupItem-73632').each(function() {
console.log('grp');
$(this).find('td').each(function(){
console.log($(this).text());
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="groupItem-12863">
<td>10</td>
<td class="selCost">34</td>
</tr>
<tr class="groupItem-12863">
<td>20</td>
<td class="selCost">5</td>
</tr>
<tr>
<td>14</td>
<td class="selCost">23</td>
</tr>
<tr class="groupItem-73632">
<td>28</td>
<td class="selCost">8</td>
</tr>
<tr class="groupItem-73632">
<td>54</td>
<td class="selCost">55</td>
</tr>
<tr class="groupItem-73632">
<td>13</td>
<td class="selCost">99</td>
</tr>
<tr>
<td>18</td>
<td class="selCost">55</td>
</tr>
<tr>
<td>99</td>
<td class="selCost">66</td>
</tr>
</table>
I had to do bit of hack, I know the html was not ideal, we can't have same id's. But sometimes refactoring the older code is out of scope. Here is the solution, not ideal but works :
$('tr[id^=groupItem-]').each(function(){
var s = 0 ;
var text = $(this).attr('id');
var arr = text.split('-');
var elem = 'tr[id^=groupItem-' + arr[1] + ']';
$(elem).find("td.selCost").each(function(){
s += parseFloat($(this).text());
});
console.log($(this).attr('id')+ '=='+s);
});
You can use the wildcard selector like tr[id^=groupItem]. Check Attribute Selector for more example.
$(function() {
$('tr[id^=groupItem]').css({
'background-color': 'red'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="groupItem-12863">
<td>10</td>
<td class="selCost">34</td>
</tr>
<tr id="groupItem-12863">
<td>20</td>
<td class="selCost">5</td>
</tr>
<tr>
<td>14</td>
<td class="selCost">23</td>
</tr>
<tr id="groupItem-73632">
<td>28</td>
<td class="selCost">8</td>
</tr>
<tr id="groupItem-73632">
<td>54</td>
<td class="selCost">55</td>
</tr>
<tr id="groupItem-73632">
<td>13</td>
<td class="selCost">99</td>
</tr>
<tr>
<td>18</td>
<td class="selCost">55</td>
</tr>
<tr>
<td>99</td>
<td class="selCost">66</td>
</tr>
</table>