<head>
<script src= "http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<table width="779" border="5" id="test">
<tr class="tablerow">
<td>ee</td>
<td>11</td>
<td>test</td>
<td>3</td>
<td>15974079
</tr>
<tr>
<td>ww1</td>
<td>hi</td>
<td>test2</td>
<td>d</td>
<td>15859779
</tr>
<tr class="tablerow">
<td>ww2</td>
<td>hi</td>
<td>test2</td>
<td>t </td>
<td>15974386</td>
</tr>
<tr>
<td>ww2</td>
<td>hi</td>
<td>test4</td>
<td>e</td>
<td>15974386</td>
</tr>
<tr>
<td>ww4</td>
<td>hi</td>
<td>test5</td>
<td>d</td>
<td>15974652</td>
</tr>
<tr>
<td>sssd</td>
<td>fgdg</td>
<td>test6</td>
<td>dzz</td>
<td>15974652</td>
</tr>
<tr>
<td>sssd</td>
<td>d</td>
<td>test7</td>
<td>d</td>
<td>15974652</td>
</tr>
</table>
<script>
var arr = $("#test tr");
$.each(arr, function(i, item) {
var currIndex = $("#test tr").eq(i);
var matchText = currIndex.children("td").eq(2).text();
$(this).nextAll().each(function(i, inItem) {
if(matchText===$(this).children("td").eq(2).text()) {
$(this).remove();
}
});
});
</script>
</body>maybe is duplicate question but i tried many links and couldn't get my answer.
I need to remove duplicate row base on third column, not first one
use eq instead first, but its not work probably,actually in very small table works but when the number or rows and columns get big its doesn't work
for example:
doesn't display forth row even not duplicate when i choose eq(4)or eq(2)
in row "ww4"
i checked this one
but its only work with first column
i tried this one too but that one is check all column in row not only base on one columns i need check only value of third row
<head>
<script src= "http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<table width="779" border="5" id="test">
<tr class="tablerow">
<td>ee
<td>11
<td>test
<td>
<td>15974079 </tr>
<tr>
<td>ww1
<td>hi
<td>test2
<td>
<td>15859779 </tr>
<tr class="tablerow">
<td>ww2
<td>hi
<td>test2
<td>
<td>15974386 </tr>
<tr>
<td>ww2
s<td>hi
<td>test4
<td>
<td>15974386 </tr>
<tr>
<td>ww4
<td>hi
<td>test5
<td>
<td>15974652 </tr>
<tr>
<td>sssd
<td>fgdg
<td>test6
<td>dzz
<td>15974652
</tr>
<tr>
<td>sssd
<td>
<td>test7
<td>
<td>15974652</tr>
</table>
<script>
var arr = $("#test tr");
$.each(arr, function(i, item) {
var currIndex = $("#test tr").eq(i);
var matchText = currIndex.children("td").eq(2).text();
$(this).nextAll().each(function(i, inItem) {
if(matchText===$(this).children("td").eq(2).text()) {
$(this).remove();
}
});
});
</script>
</body>
try this
var seen = {};
$('table tr').each(function() {
var txt = $(this).children("td:eq(2)").text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
http://jsfiddle.net/VbUxd/440/
Related
i'm pretty new to JS and after searching through the web, docs, friends and another questions here on stackoverflow I've gotten until this point. Now I can't get pass it.
$(document).ready(function() {
var $table = $("table.valores");
if ($table.length > 0) {
var ValorTh = $("th.header:contains('Valor')");
var ValorColumnIndex = $(ValorTh).index();
var Valor_rows = $($table).find('tr');
$(Valor_rows).each(function() {
$(this).find('td').eq(ValorColumnIndex).toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>
I can't get the following to work and properly format the td's value :C
toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});
You need to actually set the content of the tds. Now, you don't change the content of the elements. Try this:
$(document).ready(function() {
var $table = $("table.valores");
if ($table.length > 0) {
var ValorTh = $("th.header:contains('Valor')");
var ValorColumnIndex = $(ValorTh).index();
var Valor_rows = $($table).find('tr');
$(Valor_rows).each(function() {
var $td = $(this).find('td').eq(ValorColumnIndex);
var formatted = Number($td.text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'});
$td.text(formatted); // <-- here, you need to set the value
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>
It's because toLocaleString is a prototype of Number and not string
$(document).ready(function() {
var $table = $("table.valores tbody");
$table.find("td").each(function(i,el){
try{
$(el).text(parseFloat($(el).text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'}));
}catch(e){
//not a number
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>
(Table will be fetched from database so it will be having N number of rows)
I could get the result on console using 'td:nth-child(7)' but I want in on change of 'td:nth-child(5)' or 'td:nth-child(6)'
Here i am getting console value but cant get it in column text
http://jsfiddle.net/adwaitrao/s78y031x/11/
$(".btn").click(function() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
You mean
function show() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
}
$(".btn").on("click",show);
$("[contenteditable]").on("input",show)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
I have a multiple table and I want to get the total per table. Please see the demo in fiddle.
var total = 0;
$("table").each(function(i){
total += +$('.a', this).text() || 0;
console.log( 'total: '+total );
$("#subtotal", this).text( total );
//console.log( '-'+$('.a', this).text() );
});
https://jsfiddle.net/juandela/6r1g30dx/2/
You need to move var total=0 inside the table loop so it resets for each table
Then you need to loop over each cell to get individual cell's text.
The problem with getting all $('.a', this).text() is it concatenates all elements text into one string which is why you see numbers like "1357" as total in first table
Finally you can't repeat ID's in page so change subtotal to a class
$("table").each(function(i) {
var total = 0;
$('.a', this).each(function() {
total += +$(this).text() || 0;
});
$(".subtotal", this).text(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="a">1</td>
<td>2</td>
</tr>
<tr>
<td class="a">3</td>
<td>4</td>
</tr>
<tr>
<td class="a">5</td>
<td>6</td>
</tr>
<tr>
<td class="a">7</td>
<td>8</td>
</tr>
<tr>
<td class="subtotal"></td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="a">1</td>
<td>2</td>
</tr>
<tr>
<td class="a">3</td>
<td>4</td>
</tr>
<tr>
<td class="a">5</td>
<td>6</td>
</tr>
<tr>
<td class="a">7</td>
<td>8</td>
</tr>
<tr>
<td class="a">9</td>
<td>10</td>
</tr>
<tr>
<td class="a">11</td>
<td>12</td>
</tr>
<tr>
<td class="subtotal"></td>
</tr>
</table>
With a system that I use you can create custom fields. These fields all have the same html and css. Now I would like to get the value td where the th is week.
Now I use:
var week = $(this).find('td.bug-custom-field:last').text();
Which works but then I have to make sure it always is the last field. Is there a better way of doing this?
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
Var 1:
var week=0;
$('table tr td').each(function(){
if($(this).prev().text()=='Week'){
week=parseInt($(this).text(), 10);
}
});
console.log(week);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
Var 2:
var week = $('table').find('td.bug-custom-field:last').text();
console.log(week);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
You already have most of the details you need. Once you have the th the most robust solution is to go up to the row and then use find to find the td. The alternative is a simple .next() but is more likely to break if the layout changes.
var th = $("th.bug-custom-field.category:contains('Week')")
var row = $(th).closest("tr");
var week = $(row).find('td.bug-custom-field:last').text();
var weekTH = $("th.bug-custom-field.category:contains('Week')")
var weekTR = $(weekTH).closest("tr");
var weekTD = $(weekTR).find('td.bug-custom-field:last');
var week = $(weekTD).text();
console.log(week);
th { text-align:left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="bug-custom-field category">Name</th>
<td class="bug-custom-field" colspan="5">Test</td>
</tr>
<tr>
<th class="bug-custom-field category">Week</th>
<td class="bug-custom-field" colspan="5">23</td>
</tr>
</table>
How can I sum the values of only table rows with the countMe class in jQuery?
HTML:
<div id="sum">$0</div>
<table>
<tr>
<th>id</th> <th>value</th>
</tr>
<tr class="countMe">
<td>1</td> <td class="v">$10</td>
</tr>
<tr>
<td>2</td> <td class="v">$20</td>
</tr>
<tr class="countMe">
<td>3</td> <td class="v">$10</td>
</tr>
<tr>
<td>4</td> <td class="v">$30</td>
</tr>
</table>
I need the #sum to say $20. How can I do that?
You can do something like this:
var sum = 0;
$('tr.countMe td.v').each(function() {
sum += parseFloat($(this).text().slice(1));
});
$('#sum').text(sum);
Try
$(function() {
var countme = $('.countMe .v'), total=0;
countme.each(function(key,val) {
total += parseFloat($(this).text().slice(1));
});
$('#sum').html('$'+total);
});