Remove the vertical spacers in a td - javascript

What is the best way to remove the last occurrence of the element spacer (|) from this td using jQuery?
<td class="actionCol" nowrap="">XYZ | ERR | PING</td>

So, to remove only the last occurrence, you may do the following.
$('.actionCol').html(function(_, elem) {
return elem.replace(/\|(?!.*\|)/, '');
});
A Demo

You can replace the last occurrence using substr. No need to use regex, this will be faster than regex.
$('.actionCol').html(function(i, e) {
var lastIndex = e.lastIndexOf('|');
return e.substr(0, lastIndex) + e.substr(lastIndex + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<td class="actionCol" nowrap="">XYZ | ERR | PING
</td>
</table>

Related

Remove first word from a <td>

I have this code in my page and i want to remove first word and the minus with java script or jquery(in this case #123456 -)
<td id="someid"><a>#123456 - Some Text</a></td>
to look like this
<td id="someid"><a>Some Text</a></td>
Thank you!
Using str.substring split your string from the index of
'-' + 2 = Start of Second word to length of string
var str = document.getElementsByTagName('a')[0].innerHTML;
newstr = str.substring(str.indexOf('-')+2, str.length);
console.log(newstr);
<td id="someid"><a>#123456 - Some Text</a></td>
var str = $("#someid a").html();
$("#someid a").html( str.substring(str.search("-")+1, str.length));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="someid"><a>#123456 - Some Text</a></div>
You can do it by using jQuery
var col = $('#someid').html();
var anchor= col;
$('#someid').html('<a>'+anchor.split('-')[1].split('<')[0]+'</a>')
find the working fiddle example. https://jsfiddle.net/957keh1q/1/
Assuming the "-" char is fixed, split the string in two
var txtArray = $('#someid').val.split("-");
and take out the first space:
var newText = txtArray[txtArray.length - 1].trim();

How do I add an incrementing ID for each sentence in a paragraph?

I was able to replace the punctuation with span tags and separate the sentences, but I tried to increment the id by one for each sentence and it only worked on the first one.
$('.whatever').each(function(index) {
var sentences = $(this).html().replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g,
'<span id="'+index+'">$1</span>$2<SENTENCE_END>');
$(this).html(sentences);
});
Thanks for any ideas.
If all of your text is inside #whatever, you'll want to first split the text by periods and then iterate through each of those to add <spans>.
Here's an example:
// set counter
var j = 0;
// get text from div
var sentences = $('#whatever').text().trim();
// split text by "."
var sentences = sentences.split('.');
// empty the output div
$('#whatever').empty();
// for each sentence, check for blank sentence,
// add span with counter number, trim spaces,
// add leading space if this is not the first sentence,
// add "." at the end of sentence, output to div
$(sentences).each(function () {
if (this.trim()!='') {
$('#whatever').append( (j>0?" ":"") + '<span class="sentence" id="sentence_' + j + '">' + this.trim() + '.</span>');
j++;
}
});
http://jsfiddle.net/FrDzL/1/
Why are you using the id selector? The id selector $('#whatever') only selects one element (the first element matching the id on the page). Hence that each loop is only executed once (that's why it only worked in the first one).
Modify your html code to use classes, and select using $('.whatever').
ID Selector (“#id”)
Selects a single element with the given id attribute.
Source: http://api.jquery.com/id-selector/
Try the following
HTML
<p class="whatever">hej</p>
<br>
<p class="whatever">hej</p>
<br>
<p class="whatever">hej</p>
JS
var j = 0;
$('.whatever').each(function() {
var sentences = $(this).html().replace('hej','nej');
j++;
$(this).html(sentences);
});
JSFiddle
And finally, working code for your example
var j = 0;
$('.whatever').each(function() {
var sentences = $(this).html().replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g,
'<span class="sentence" id="'+j+'">$1</span>$2<SENTENCE_END>');
j++;
$(this).html(sentences);
});

Fetching the innerHTML from TD in jQuery

Hi I am using Sharepoint 2010 page, where I have the HTML snipet with the following structure:
<tr>
<td></td>
<td class="ms-vb2"></td>
<td class="ms-vb2"></td>
<td class="ms-vb2"></td>
<td class="ms-vb2"></td>
<td class="ms-vb2"><nobr><b>Sum= 72</b></nobr></td>
<td class="ms-vb2"><nobr><b>Sum= 66</b></nobr></td>
</tr>
Now I want to get the value 72 and 66 from the TD tag in a var, so that I can use these values in the client scripts.
The "Sum=" part of the TD is not supposed to change. And the ID of the table is randomly generated by sharepoint so I can't do anything with that as well.
Please help.
Thanks,
$(".ms-vb2 b").each(function(td) {
var s = td.hmtl().replace("Sum= ", "");
$("body").append(s);
});
Here's the working fiddle.
Try like below, It will help you..
Fiddle : http://jsfiddle.net/RYh7U/150/
$('td.ms-vb2').each(function() {
var value = $(this).text();
if(value !="")
alert(value);
//If you want to replace the Sum= in Text then try the below code
$(this).text($(this).text().replace("Sum= ",""));
});
Here is the solution- took time for me to generate the same.. :)
var arrValue = "";
$('td.ms-vb2').filter(function (i) {
if ($(this).html().indexOf('Sum=') > 0) {
mystring = $(this).html();
var result = /\d+(?:\.\d+)?/.exec(mystring);
//console.log(arrValue)
arrValue = result[0] + "," + arrValue
}
});
Thanks

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;
});
});

Categories

Resources