Develop Reference

Remove a row from Html table based on condition

I have a html table
<TABLE id="dlStdFeature" Width="300" Runat="server" CellSpacing="0" CellPadding="0">
<TR>
<TD id="stdfeaturetd" vAlign="top" width="350" runat="server"></TD>
</TR>
</TABLE>
I am dynamically adding values to it as :
function AddToTable(tblID, value)
{
var $jAdd = jQuery.noConflict();
var row= $jAdd("<tr/>").attr("className","lineHeight");
var cell = $jAdd("<td/>").attr({"align" : "center","width" : "3%"});
var cell1 = $jAdd("<td/>").html("<b>* </b>" + value);
row.append(cell);
row.append(cell1);
$jAdd(tblID).append(row);
}
Now I want a function to remove a row from this table if the value matches..as
function RemoveFromTable(tblID, VALUE)
{
If(row value = VALUE)
{
remove this row
}
}
Here VALUE is TEXT ..which needs to be matched..If exists need to remove that row,,

try this
function RemoveFromTable(tblID, VALUE){
$("#"+tblID).find("td:contains('"+VALUE+"')").closest('tr').remove();
}
hope it will work

Try like this
function RemoveFromTable(tblID, VALUE)
{
If(row value = VALUE)
{
$("TR[id="+VALUE+"]").hide(); //Assumes that VALUE is the id of tr which you want to remove it
}
}
You can also .remove() like
$("TR[id="+VALUE+"]").remove();

I highly recommend using a ViewModel in your case. So you can dynamically bind your data to a table and conditionally format it to whatever you like. Take a look at Knockout.js: http://knockoutjs.com/

function RemoveFromTable(tblID, VALUE){
$(tblID).find('td').filter(function(){
return $.trim($(this).text()) === VALUE;
}).closest('tr').remove();
}

Remove row from HTML table that doesn't contains specific text or string using jquery.
Note: If there are only two column in HTML table, we can use "last-child" attribute to find.
*$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:last-child");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: If there are more than two column in HTML table, we can use "nth-child(2)" attribute to find.
Passing column index with "nth-child(column index)"
$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:nth-child(2)");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: "DrivePilot" is nothing but text or string

How to add html contents taken from an html table?

I have this script
$('table#preview td.price').each(function(){
var price = parseInt($(this).html());
var total;
if(price == ''){
price = 0;
}
total += price;
alert(total);
});
What it does is get the column that has the class price then supposedly adds it all up.
However, all I get from this code is NaN. I don't get what's wrong with the code.
Please note the script if(price == ''). I've done this because initially there are no contents in the table.
Edit: Here the html
<table>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr>
<td>pen</td>
<td class="price>6</td>
<td>paper</td>
<td class="price>8</td>
</tr>
</table>

Try using the .text() method instead of .html() method, it should hopefully help get rid of the NaN errors. You'll want to declare the total outside the scope of each iteration so it doesn't get reset each time. Try giving this a go, I've simplified it slightly to also include a check against the number price:
var total = 0;
$('table#preview td.price').each(function()
{
var price = parseInt($(this).text());
if (!isNaN(price))
{
total += price;
}
});
alert('The total is: ' + total);
Update
Here's a jsFiddle. N.B. .html() should also work.

Jquery group by td with same class

I have the current table data:
<table>
<tr class="Violão">
<td>Violão</td>
<td class="td2 8">8</td>
</tr>
<tr class="Violão">
<td>Violão</td>
<td class="td2 23">23</td>
</tr>
<tr class="Guitarra">
<td>Guitarra</td>
<td class="td2 16">16</td>
</tr>
</table>
What I want to do is groupby the TDs which are the same, and sum the values on the second td to get the total. With that in mind I´ve put the name of the product to be a class on the TR (don't know if it is needed)
and I've coded the current javascript:
$(".groupWrapper").each(function() {
var total = 0;
$(this).find(".td2").each(function() {
total += parseInt($(this).text());
});
$(this).append($("<td></td>").text('Total: ' + total));
});
by the way the current java scripr doesn't groupby.
Now i'm lost, I don't know what else I can do, or if there is a pluging that does what I want.

</tr class="Violão"> This doesn't make sense. You only close the tag: </tr>. And I'm assuming you know that since the rest of your code is proper (except for your classnames. Check this question out).
If you want to add the values of each <td> with a class of td2, see below.
Try this jQuery:
var sum = 0;
$(".td2").each(function(){
sum = sum + $(this).text();
});
This should add each number within the tds to the variable sum.

<table>
<tr class="Violão">
<td>Violão</td>
<td class="td2 8">8</td>
</tr>
<tr class="Violão">
<td>Violão</td>
<td class="td2 23">23</td>
</tr class="Violão">
<tr class="Guitarra">
<td>Guitarra</td>
<td class="td2 16">16</td>
</tr>
</table>
var dictionary = {};
$("td").each(function(){
if(!dictionary[$(this).attr("class"))
dictionary[$(this).attr("class")] = 0;
dictionary[$(this).attr("class")] += parseInt($(this).html());
});

// declare an array to hold unique class names
var dictionary = [];
// Cycle through the table rows
$("table tr").each(function() {
var thisName = $(this).attr("class");
// Add them to the array if they aren't in it.
if ($.inArray(thisName, dictionary) == -1) {
dictionary.push(thisName);
}
});
// Cycle through the array
for(var obj in dictionary) {
var className = dictionary[obj];
var total = 0;
// Cycle through all tr's with the current class, get the amount from each, add them to the total
$("table tr." + className).each(function() {
total += parseInt($(this).children(".td2").text());
});
// Append a td with the total.
$("table tr." + className).append("<td>Total: " + total + "</td>");
}
Fiddler (on the roof): http://jsfiddle.net/ABRsj/

assuming the tr only has one class given!
var sums = [];
$('.td2').each(function(){
var val = $(this).text();
var parentClass = $(this).parent().attr('class');
if(sums[parentClass] != undefined) sums[parentClass] +=parseFloat(val);
else sums[parentClass] = parseFloat(val);
});
for(var key in sums){
$('<tr><td>Total ('+key+')</td><td>'+sums[key]+'</td></tr>').appendTo($('table'));
}
I would give the table some ID and change to appendTo($('#<thID>'))

The solution:
http://jsfiddle.net/sLysV/2/

First stick and ID on the table and select that first with jQuery as matching an ID is always the most efficient.
Then all you need to do is match the class, parse the string to a number and add them up. I've created a simple example for you below
http://jsfiddle.net/Phunky/Vng7F/
But what you didn't make clear is how your expecting to get the value of the td class, if this is dynamic and can change you could make it much more versatile but hopefully this will give you a bit of understanding about where to go from here.

getting the other values from other td in a table

Okay i have a HTML TABLE , with 4 TDs in a TR(tow) as shown in the code below:
<table>
<tr>
<td class="1">Lemon</td>
<td class="2">Orange</td>
<td class="3">Tea</td>
<td class="4">Get</td>
</tr>
<tr>
<td class="1">Apple</td>
<td class="2">Tomato</td>
<td class="3">Pineapple</td>
<td class="4">Get</td>
</tr>
</table>
How can i use jQuery to make , when a#GET is clicked , it will go get the class 1 , 2 , 3 values which is in the same table row as it.
For example , i click on the a#get in the first row , i will get Lemon , orange , tea as the results.
I use the jQuery code below but it's not working:
$(document).ready(function(){
$('a#get').click(function(e){
e.preventDefault();
var val1 = $(this).parent().find('td.1').html();
var val2 = $(this).parent().find('td.2').html();
var val3 = $(this).parent().find('td.3').html();
alert(val1 + val2 + val3);
});
});
Any ideas on how can i do this or what i'm doing wrong?
thanks!

See Working Demo
You should use unique id, here is modfifed code:
$(document).ready(function(){
$('a.get').click(function(e){
e.preventDefault();
var val1 = $(this).closest('tr').find('td.1').html();
var val2 = $(this).closest('tr').find('td.2').html();
var val3 = $(this).closest('tr').find('td.3').html();
alert(val1 + val2 + val3);
});
});
Using parent you were getting back to td because link is inside that, you needed to get back to tr which is done through closest('tr'). Also html has been modified for link element to have unique id.
Get

You're calling .find() inside the td element, while you actually need to call it in tr, which is one level higher.
Replace $(this).parent().find(...) with $(this).parent().parent().find(...).
(And you should make your IDs unique, as pimvdb suggested.)

There's no point adding a class to the cells, if they're just numerical - you can use eq() for that.
Here's how I'd do it:
$('#table-id tr').each(function() {
var tds = $(this).find('td');
$(this).find('a.get').click(function() {
alert(tds.eq(0).html() + tds.eq(1).html() + tds.eq(2).html());
return false;
});
});

jQuery change text in link

I have a simple question for jQuery...
I have a table with a link like this
<table>
<tr>
<td class="views-field">
201105
</td>
</tr>
</table>
Now I would change the link's text from 201105 to 2011-05
(simple add a "-" after the first 4 characters)
I tried substring but don't work... Help me!!

This will translate all td.views-field links:
$('td.views-field a').each(function () {
var oldText = $(this).text();
$(this).text(oldText.substr(0,4) + '-' + oldText.substr(4));
});

$("a").text($("a").text().substring(0,4)+"-"+$("a").text().substring(4,6) );

Try the code below, that should work fine.
var replaceElement = $("td.views-field a").first();
var oldDate = replaceElement.text();
var newDate = oldDate.substring(0, 4) + "-" + oldDate.substring(4,6);
replaceElement.text(newDate);