How can I use jQuery to separate multiple words in a td with an HTML tag such as <br/>?
For example, <td>hello bye</td> would become <td>hello <br/> bye</td>.
views:
100answers:
3Two problems: 1. This will replace all `<td>`'s text with the text of the first one (plus replacements). 2. This will wreak havoc with html code inside the `<td>`s (inserting line breaks between attributes, etc.).
Max Shawabkeh
2010-04-28 20:03:42
just make sure you apply a unique ID or Class to the table
GerManson
2010-04-28 20:04:19
so for the ones that i want to use <br/> set id for it right??
2010-04-28 20:05:19
so like this would work $("td#mytd").html($("td#mytd").html().replace(" ","<br/>"));
2010-04-28 20:09:40
you are correct, jq-444
Matt Ellen
2010-04-28 20:16:15
@Max Shawabkeh: agree but the asker do not specified if it wanted all td or a specific one to be processed. And for the inner html elements he doesn't seem to have ones
Gregoire
2010-04-28 20:19:27
@Gregoire: he did say *a* td, so maybe he's only interested in one specific td? random guess though and you may also be right :)
Amry
2010-04-28 20:33:45
i ran into a problem here altough i used id it duplicates all cuz i use php it genrates tds <td id="mytd"><?php echo $data ?>/td>any idea
2010-04-28 20:34:56
@jq-444 do you have an unique identifier for your data? So you can do the following: <td id="mytd<?php echo $youruniqueid?>"><?php echo $data ?>'/td> and acess it by $("#mytd<?php echo $youruniqueid?>")
Gregoire
2010-04-29 02:46:14
+2
A:
With jQuery 1.4+ you could do this:
$('td').html(function(i,html){
return html.replace(/\s/g, '<br>');
})
The above doesn't appear to be working, where as changing the .html to .text works, but of course you can't add HTML elements that way. So your best bet would be to do this (change your TD Id's to TD classes):
Edit #2 (replace the bad code)
$(document).ready(function(){
$('td.myTd').each(function(){
$(this).html( $(this).html().replace(/\s/g, '<br>') );
})
})
But as Max Shawabkeh pointed out, this will cause problems if you have any HTML with attributes inside of the <td> (e.g. <span class="text">...</span>)
fudgey
2010-04-28 20:31:12
i tried this it dosent work $('td#mytd').html(function(){ return $(this).html().replace(' ', '<br>'); })
2010-04-28 20:53:04
Interesting... I didn't test it initially. It should work, but doesn't. I believe it to be a jQuery bug. To fix your problem, I think you should use a class instead of an id - I'll update my answer.
fudgey
2010-04-28 21:05:01
and an other problem is it duplicates it i use php what i have is this <td class="mytd"><?php echo $mon ?></td> <td class="mytd"><?php echo $thu ?></td> <td class="mytd"><?php echo $wed ?></td> is there any other way to accomplish this. it dont have be a html tag it could be dashes _______ i just wanna sparate it
2010-04-28 21:12:18
Sorry, the code I added was bad, I have updated my answer with code I have tested.
fudgey
2010-04-28 21:33:26
A:
This will work only if the HTML in the td's does NOT contain any tags.
$("td").each(function(){
this.innerHTML = this.innerHTML.replace(/ +/g,"<br/>");
});
David Murdoch
2010-04-28 21:18:54