jQuery change text in link - javascript

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

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

jquery dynamically split string and wrap into class

I'm trying to split the div's text and add class to the second string. But no luck :(
Here's the code:
<div class="graphTooltipText">925 11:45pm</div>
This is not working:
var str = $( ".graphTooltipText" ).html();
var splitter = str.split(' ')[1];
$(splitter).wrap('<div class="time" />');
Any help is appreciated.
You need to wrap it and then update the original element, so try
$('.graphTooltipText').html(function (i, html) {
return html.replace(/\s(.*$)/, ' <div class="time">$1</div>')
});
Demo: Fiddle
http://jsfiddle.net/kJm8Q/1/
This simply wraps the item, and spits out the 2nd array element:
$(".graphTooltipText").wrap(function() {
$(this).html("<div class='time'>" + $( this ).text().split(" ")[1] + "</div>");
});
Try This:
var str = $(".graphTooltipText").html(function (_, html) {
return html.replace(html.split(' ')[1], '<div class="time" >' + html.split(' ')[1] + '</div>');
});
you can use it too:
var str = $(".graphTooltipText").text();
var splitter = str.split(' ');
var timeDiv = $('<div/>', {
'class': 'time',
text: splitter[1] // put the time here
});
$(".graphTooltipText").html(splitter[0]).append(timeDiv); // update the div content
Fiddle

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

Trying to get class name from tr tag - 'undefined'

I need to get the class name from a given <tr> tag, but am unable to do so.
<table cellpadding=5 cellspacing=5>
<tr id='cat_abc123' class='class_a'>
<td>foo</td>
<td><input type='checkbox' name='cb1' value='1' onClick="info(this, 'abc123')">
</tr>
</table>
<script language='javascript'>
function info(theElement, id)
{
tr_id = 'cat_' + id;
alert(tr_id + ' ' + document.getElementById(tr_id).class);
}
</script>
Working example:
http://jsfiddle.net/rQpeu/
What am I missing?
Update
I was using the wrong descriptor - should use Classname. Thanks for the prompt responses everyone! Updated jsfiddle: http://jsfiddle.net/rQpeu/3/
element.class is incorrect.
You need to use element.className.
https://developer.mozilla.org/en-US/docs/DOM/element.className
Use className instead of class jsfiddle
<script language='javascript'>
function info(theElement, id)
{
tr_id = 'cat_' + id;
alert(tr_id + ' ' + document.getElementById(tr_id).className);
}
</script>
Use
document.getElementById(tr_id).className
or for modern browsers which support DOMTokenList:
var d = document.getElementById(tr_id).classList
// d[0] would return class_a
It's classname, not class.
alert(tr_id + ' ' + document.getElementById(tr_id).className);
jsFiddle example
See: https://developer.mozilla.org/en-US/docs/DOM/element.className
Use className instead of class
document.getElementById(tr_id).className

Add mailto: with jQuery?

<table id="here" border="1">
<tr><td>London</td><td>london#us.uk</td><td>aaa</td><td>aaa</td></tr>
<tr><td>Manchester</td><td>manchester#us.uk</td><td>aaa</td><td>aaa</td></tr>
<tr><td>Liverpool</td><td>liverpool#us.uk</td><td>aaa</td><td>aaa</td></tr>
<tr><td>Ipswich</td><td>ipswich#us.uk</td><td>aaa</td><td>aaa</td></tr>
</table>
Is possible add link mailto: for second columns with email addresses with jQuery (not modify HTML)? If yes, how?
http://jsfiddle.net/zwsMD/1/
You could just replace the contents of each second td with an a element with a mailto: href: http://jsfiddle.net/zwsMD/5/.
​$("#here td:nth-child(2)").each(function() {
var email = $(this).text();
// replace contents
$(this).html(
$("<a>").attr("href", "mailto:" + email).text(email)
);
});​​​​​​​​​​​​​​​​​​​​
Assuming it's always the second td of each row, you could iterate over those elements and wrap the contents in an a element:
$("#here td:nth-child(2)").each(function() {
$(this).contents().wrap("<a href='mailto:" + $(this).text() + "'>");
});​
Here's a working example.
You will need to loop around every row, find the cell you want and wrap a link around the content. You can use wrapInner for this.
$("#here tr").each(function() {
var td = $(this).children().eq(1);
var email = "mailto:" + td.text();
td.wrapInner($("<a>").prop("href", email));
});​
Live example
You could do something like this
​$('td:nth-child(2)').each(function(){
var text = $(this).text();
var href = "mailto:"+text;
var $a = $('<a>', { href: href, text: text});
$(this).text('').append($a);
});​​​​​​​​​​​​​​​​​​​​
fiddle here http://jsfiddle.net/zwsMD/6/

Categories

Resources