Jquery or Javascript create ranking column based from total - javascript

I want to compute and fill the ranking in the image below based on the total. How will be able to achieve this using js/jquery?.
I have created the table manually (dynamically also) using HTML. I also have button to generate the rank (which I know how to do it). I just want to have a function or way to add rank to my column.
So that rank should be in order (1, 2, 2, 3).
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
Any help will be appreciated.


You have to organise the total score by getting all the values, sort and remove duplicates.
And you can assign the rank value by $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
You can do something like:
$(function() {
//Get all total values, sort and remove duplicates
let totalList = $(".total")
.map(function() {return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b) {if (b != a[0]) a.unshift(b);return a}, [])
//Assign rank
totalList.forEach((v, i) => {
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total">80</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">50</td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
You can even make it shorter like
$(".total")
.map(function(){return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])
.forEach((v,i)=>{
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
});

Related

Getting the count of unique values for elements with regex in datatable

I have a data table that has a structure like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566"</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>
I want to have the count of the unique values present in the elements with id starting from "invNumbers".
Duplicate values should be only counted once. So here the output should be
Count = 3 . As I have only 3 unique values i.e. 12345,4566,2566.

Here are 3 versions
ES6 with fat arrows
ES2015 with function
Legacy JS which should run from IE8 or so
const uniqueCount = [...document.querySelectorAll("td[id^=invNumbers]")]
.reduce((acc, cur) => {
const val = cur.textContent;
if (!acc.includes(val)) acc.push(val);
return acc;
}, []).length;
console.log(uniqueCount)
// no fat arrows =>
const uniqueCount1 = [...document.querySelectorAll("td[id^=invNumbers]")]
.reduce(function(acc, cur) {
const val = cur.textContent;
if (!acc.includes(val)) acc.push(val);
return acc;
}, []).length;
console.log(uniqueCount1)
// Legacy - not ES2015 or ES6
var cells = document.querySelectorAll("td[id^=invNumbers]"); // supported since IE9 or so
var arr = [];
for (var i = 0; i < cells.length; i++) {
var val = cells[i].innerText;
if (arr.indexOf(val) ===-1) arr.push(val);
}
console.log(arr.length)
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>

You could try something like this:
var arr = $('td[id^=invNumbers]').map(function() {
return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
return a.indexOf(v) === i
});
Demo
var arr = $('td[id^=invNumbers]').map(function() {
return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
return a.indexOf(v) === i
});
console.log(unique);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>

Remove Specific td text when having duplicate

i am having table data like this
how to remove text on specific td ( Generasi, Unit Code, Agent Code, Unit Name ) with having duplicate text and keep only 1
so the results can be like this
this is my fiddle
JSFIDDLE

I Have Fixed this. Please find the below changes in html and script.
This code will add a table below your table which is not sorted and remove your js totally and paste the below.
In HTML I have added a div below
var FinalIndex = [];
var tbl = $('table#tableUnit tr').get().map(function(row) {
return $(row).find('td').get().map(function(cell) {
return $(cell).html();
});
});
/* console.log(tbl) */
$.each(tbl, function(index, data) {
if (data.length > 5) {
console.log('data:' + index);
count = 0;
$.each(tbl, function(indexF, dataF) {
if (indexF <= index) {
if (data[0] == dataF[0] && data[1] == dataF[1] && data[2] == dataF[2] && data[3] == dataF[3] && count == 0 && count == 0) {
count = count + 1;
if (index == indexF) {
console.log("comparing :" + index + "with" + indexF);
console.log('count:' + count);
console.log(data[0] + '.' + data[1] + " first value " + dataF[0]);
FinalIndex.push(index);
}
}
}
});
} else {
FinalIndex.push(index);
}
});
console.log(FinalIndex)
function makeTable(tbl) {
var table = '<table>';
$.each(tbl, function(index, value) {
if (jQuery.inArray(index, FinalIndex) !== -1) {
table += '<tr>';
$.each(value, function(ind, v1) {
/* console.log(ind); */
table += '<td>' + v1 + '</td>';
});
table += '</tr>';
}
});
/* return ($(table)); */
table += '</table>';
console.log(table);
$('.finalTable').html(table);
};
makeTable(tbl);
$('#btnOrig').click(function(){
$('#orig_table').toggle();
});
#orig_table{border:1px solid red;box-sizing:border-box;display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btnOrig">Show Original Table</button>
<div id="orig_table">
<table class="table" id="tableUnit" style="width: 100%;">
<thead>
<tr>
<th style="width: 7em;"><strong>Generasi</strong></th>
<th style="width: 20em;"><strong>Unit Code</strong></th>
<th style="width: 20em;"><strong>Agent Code Unit</strong></th>
<th style="width: 6em;"><strong>Unit Name</strong></th>
<th style="width: 6em;" class="center"><strong>No.</strong></th>
<th style="width: 5em;"><strong>Agent Code</strong></th>
<th style="width: 15em;"><strong>Agent Name</strong></th>
<th style="width: 15em;"><strong>VOC</strong></th>
<th style="width: 15em;"><strong>KPM</strong></th>
<th style="width: 15em;" class="right"><strong>Case</strong></th>
<th style="width: 15em;" class="right"><strong>ALP</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-0</strong></td>
<td></td>
<td class="right"><strong>0</strong></td>
<td class="right"><strong>0</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>1</td>
<td>00905445</td>
<td>NESTI RAHAYU</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>2</td>
<td>00905448</td>
<td>AISYAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A6011</td>
<td>00923917</td>
<td>FRANSISKA YULIANA B.D.</td>
<td>3</td>
<td>00905454</td>
<td>ADYANTA YOGA PRADANA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-1</td>
<td>A7924</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>4</td>
<td>00947903</td>
<td>MELVA SUPARDI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-1</strong></td>
<td></td>
<td class="right"><strong>5</strong></td>
<td class="right"><strong>48.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-2</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>1</td>
<td>00918088</td>
<td>JOHN HENDRI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A5993</td>
<td>00923678</td>
<td>PATENSAROHA PANJAITAN</td>
<td>2</td>
<td>00924255</td>
<td>PURNAMA MARINTAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">28.800.000</td>
<td></td>
</tr>
<tr>
<td>G-2</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>3</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">2</td>
<td class="right">31.200.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-2</strong></td>
<td></td>
<td class="right"><strong>8</strong></td>
<td class="right"><strong>72.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-3</td>
<td>A2190</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>1</td>
<td>00906041</td>
<td>LIESTYANINGSIH PRASETYO</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>2</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">73.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00911258</td>
<td>CAROTRIANA HARTIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>4</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8603</td>
<td>00966488</td>
<td>RISANG RUDI PERMADI</td>
<td>5</td>
<td>00925635</td>
<td>RICHA DEWI AZDANI</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">4</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>6</td>
<td>00941248</td>
<td>ROCHIMI DIAN PUSPITASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">9.600.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A7240</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>7</td>
<td>00942942</td>
<td>SOE ESTI MURNIATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">23.040.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A8053</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>8</td>
<td>00951213</td>
<td>A. M. GANDA MARPAUNG</td>
<td>JB3</td>
<td>JAM707</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>9</td>
<td>00953857</td>
<td>MOCH KEMAL ASYAF</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr>
<td>G-3</td>
<td>A2006</td>
<td>00905496</td>
<td>MARYANAH</td>
<td>10</td>
<td>00968671</td>
<td>GITA NELWAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-3</strong></td>
<td></td>
<td class="right"><strong>21</strong></td>
<td class="right"><strong>195.640.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-4</td>
<td>A4040</td>
<td>00909748</td>
<td>KARINA</td>
<td>1</td>
<td>00909748</td>
<td>KARINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">54.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>2</td>
<td>00910517</td>
<td>ALFIAN IDRUS</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A5974</td>
<td>00923389</td>
<td>ALI WIDODO</td>
<td>3</td>
<td>00912869</td>
<td>ROHMAT</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.060.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>4</td>
<td>00925358</td>
<td>ANDRIYANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">8.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6789</td>
<td>00909167</td>
<td>WAHYU RIDWAN NUGROHO</td>
<td>5</td>
<td>00938577</td>
<td>ACHMAD TAUFIK</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">4.800.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>6</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>7</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6091</td>
<td>00910151</td>
<td>NONAH SUHANAH</td>
<td>8</td>
<td>00947779</td>
<td>YENNI CHRISTINA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A7204</td>
<td>00941979</td>
<td>MANUELA R SIAGIAN</td>
<td>9</td>
<td>00959611</td>
<td>LAURENTIA DYAH IKA G</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">10.400.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A2042</td>
<td>00905588</td>
<td>HENY BAYU SAFITRI</td>
<td>10</td>
<td>00965234</td>
<td>YASAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">12.000.000</td>
<td></td>
</tr>
<tr>
<td>G-4</td>
<td>A6659</td>
<td>00910973</td>
<td>FERMOLINA</td>
<td>11</td>
<td>00968489</td>
<td>ANDRE PERBAWA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">36.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-4</strong></td>
<td></td>
<td class="right"><strong>14</strong></td>
<td class="right"><strong>167.660.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>G-5</td>
<td>A2157</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>1</td>
<td>00905917</td>
<td>SYARIFAH</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">4</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A2043</td>
<td>00905590</td>
<td>BUNGAIDAL ADKHIA</td>
<td>2</td>
<td>00911669</td>
<td>ZULFIKAR</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>3</td>
<td>00914524</td>
<td>RITAWATI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">3</td>
<td class="right">13.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8896</td>
<td>00946599</td>
<td>ILHAM WAHYUDIN</td>
<td>4</td>
<td>00923652</td>
<td>DEDEN AMARULLAH</td>
<td>SB</td>
<td>SKB008</td>
<td class="right">1</td>
<td class="right">4.200.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6916</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>5</td>
<td>00937689</td>
<td>SUDIRMAN</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8199</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>6</td>
<td>00944267</td>
<td>DEWI KARTINI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">30.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8131</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>7</td>
<td>00954706</td>
<td>HENDRA SURYA</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">15.600.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A6307</td>
<td>00911807</td>
<td>BERTA M PURBA</td>
<td>8</td>
<td>00964680</td>
<td>DANIEL</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">1</td>
<td class="right">6.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A8822</td>
<td>00944260</td>
<td>DESSY RANTAU WIDIASARI</td>
<td>9</td>
<td>00967703</td>
<td>YANTI ARIANI</td>
<td>TN1</td>
<td>JKT0A1</td>
<td class="right">2</td>
<td class="right">18.000.000</td>
<td></td>
</tr>
<tr>
<td>G-5</td>
<td>A7824</td>
<td>00913029</td>
<td>YULI PURWANTI</td>
<td>10</td>
<td>00968122</td>
<td>NOVIA BETSY CLARISSA</td>
<td>SM</td>
<td>SMG043</td>
<td class="right">1</td>
<td class="right">24.000.000</td>
<td></td>
</tr>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>SUB TOTAL G-5</strong></td>
<td></td>
<td class="right"><strong>18</strong></td>
<td class="right"><strong>165.000.000</strong></td>
<td></td>
</tr>
<tr>
<td colspan="12"></td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#ededf9">
<td colspan="8" class="right"><strong>GRAND TOTAL</strong></td>
<td></td>
<td class="right"><strong>66</strong></td>
<td class="right"><strong>648.300.000</strong></td>
<td></td>
</tr>
</tfoot>
</table>
</div><!-- #orig_table -->
<h2>Final Table:</h2>
<div class="finalTable"></div>

Get the last tr which id begins with Row_

I want to get with jQuery the greater id for all tr in a table.
If I have this table:
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
I want to get the id Row_3.
I can use the :last selector, $( "tr:last" ) but it doesn't work because it returns the row for the <tfoot> section.
Maybe there is a way to add a filter to the :last selector to find the last tr with an id that begins with Row_.
Any advice?

You can use attribute start with selector:
$("tr[id^='Row_']:last" )

Assuming all the rows in tbody have the id just use tbody in selector
$( "tbody tr:last" )

You can use starts with
alert($("tr[id^='Row_']:last").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
If you just want last tr inside tbody then use:
$("tbody tr:last")

Selenium While Loop?

</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>
<tr>
<td>click</td>
<td>//div[#id='wrapper']/div/div/div</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[1]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[2]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[3]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[4]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
I want to click through 4 sections.
All have the same path, but not the same tablediv.
/div/div/div[2]/table/tbody/tr[1]/td
--> 1 to 4
How can I do this, thats the code are minimalize,
how can I use a while loop here?
The Code in Selenium has 18 commands..
Thanks

Since you are using Selenium IDE rather than WebDriver, the only "while" loop that you'll be able to execute is by executing plain old javascript.
<tr>
<td>store</td>
<td>iterator</td>
<td>1</td>
</tr>
<tr>
<td>storeEval</td>
<td>while (iterator <= 4) { browserBot.click("/div/div/div[2]/table/tbody/tr[1]/td[" + iterator + "]" }</td>
<td></td>
</tr>
You'll of course need to play with it, this is pseudo-code but will give a pretty decent idea of how to solve it using the IDE.

Inserting HTML Table Row "Heading" Based On Dynamic Visible Element Data Attribute

Let's say I have a table containing rows which contain a table cell having a data-time attribute and may or may not be visible (ie. display: none). This visibility is dynamic and at any point a row may change.
Only the first of three table cell in these rows contains a data-time attribute.
The table rows are already grouped according to their children's data-time attribute value. My goal is to utilize JS/jQuery to insert a new table row above the first/unique visible occurrence of any particular data-time value. This row should contain a table cell which spans the entire width of the table and has text equivalent to the corresponding data-time value.
Example start:
<table>
<tr style="display:none;">
<td data-time="7:15 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<tr style="display:none;">
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<table>
Example goal:
<table>
<tr style="display:none;">
<td data-time="7:15 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">8:00 pm</td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td data-time="8:00 pm"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">9:30 pm</td>
</tr>
<tr>
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<tr style="display:none;">
<td data-time="9:30 pm"></td>
<td></td>
<td></td>
</tr>
<table>

Is this what you are looking for:-
http://jsfiddle.net/9XTat/
$('#addRow').click(function(){
$('td[data-time]',$('tr').not('tr[style="display:none;"]')).each(function(i,o){
var lastelement = $('td[data-time="' + $(this).data('time') + '"]').first();
if((lastelement.parent('tr').prev('tr.textRow')).length == 0)
{
var newelement = '<tr class="textRow"><td colspan="3">' + $(this).data('time') + '</td> </tr>'
lastelement.parent().before(newelement);
}
});

Categories

Resources