How to replace text in a table using Jquery(or Javascript)? - javascript

I have a table
<table id="t">
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
</table>
i want to replace "abc"(in td) with "abc" as in the following
<table id="t">
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
</table>
i googled for the solution but didn't find any.
Thanks in advance.


You can do:
$('td').html(function(i, html){
return html.replace(/abc/g, '<span class="c2">abc</span>');
});
This goes through each <td>, looks at its text, then replaces every occurrence of abc with abc wrapped in the span you want.


Something like:
$('td').each(function () {
$(this).html($(this).html().replace('abc', '<span class="c2">abc</span>'));
});
http://jsfiddle.net/Ru8XX/


Try this:
$('#t td').each(function(){
$(this).html( $(this).html().replace("abc","<span class='c2'>abc</span>") );
});

Related

Add/show each row by unique ID

I would like to show each hidden row using the same button. When the user clicks add+ to display another hidden row. If that makes since.
I'm using this script to hide all table rows except the first one.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();
});
</script>
</script>
When the button (#add) is clicked once, if the row is not visible show next row
otherwise remain hidden. This works well for displaying one table. How would I
go about displaying the rest of the tables like this one without spitting them all out at once? I would like them displayed one by one.
<script type="text/javascript">
$("#add").click(function () {
if ($('tr#row2:visible').length==0)
{
$('tr#row2').show();
$("#add").attr('value','Remove');
}
else{
$('tr#row2').hide();
$("#add").attr('value','Add');
}
});
</script>
The rest of the code looks something like this and each row has a different ID.
Any Ideas?
<table width="200" border="6">
<input id="add" type="button" value="Add" style="width:70px"/>
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

If this isn't what you're after let me know and I'll see if I can't help you out. At least It may give you some ideas.
<script type='text/javascript'>
var currentRow = 2;
var previousRow = null;
var defaultRowNumber = 2; // constant: For when we need to reset current row value.
var resetRowNumberOn = 7; // constant: This looks odd but it's how the function and math works together.
$(document).ready(function () {
$('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();
$("#add").click(function () {
ShowHideRow(currentRow)
});
var ShowHideRow = function (rowNumber) {
if ($('tr#row' + rowNumber + ' :visible').length == 0) {
$('tr#row' + rowNumber).show();
$("#add").attr('value', 'Remove');
}
else {
$("#add").attr('value', 'Add');
}
if (typeof previousRow === 'number')
$('tr#row' + (previousRow)).hide();
previousRow = currentRow;
currentRow++;
if (currentRow === resetRowNumberOn) {
currentRow = defaultRowNumber;
$('tr#row' + (previousRow)).hide();
previousRow = null;
}
}
});
</script>
<table width="200" border="6">
<input id="add" type="button" value="Add" style="width:70px" />
<tr id="row1">
<td>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td>2 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td>3 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td>4 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td>5 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

Adding Image on html table dynamically using JQuery

I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?

As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]

position fixed the first row of my table when it reaching the top of the browser

is it posible to have the first row of the table to position:fixed when it reaching the top of the browser so that when you scroll further down you still see the names?
this is the page of the website where i want to do this:
http://all-areas-bikers.be/klassement
my html is:
<div id="wrapper" style="height:750px" >
<div id="positionFix">
<table class="klassement">
<tbody>
<tr class="leden">
<td class="datum">Datum</td>
<td>Bart</td>
<td>Benny</td>
<td>Marijn</td>
<td>Peter</td>
<td>Pieter</td>
<td>Steven Ds</td>
<td>Steven Sp</td>
<td>Sven</td>
<td>Wim</td>
</tr>
</tbody>
</table>
</div>
<table class="klassement">
<tbody>
<tr class="leden nocolor">
<td class="datum"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">2 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">9 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">16 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum"> 23 feb 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">2 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">9 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">16 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum"> 23 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">30 ma 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">6 apr 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="datum">13 apr 2014</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
I have read a lot of other question which are almost the same but canot come trough the solution. The table will be getting longer as the year goes by.
My javascript is not that good so please can someone help me with this. It is a joomla site, so i don't know if its posible.
Benny

Something like this:
table tr:first-child {
position:fixed;
}
http://jsfiddle.net/gxn72/
Ok, to give you an idea of what you have to do:
$(window).scroll(function() {
var row = $('table tr:first-child');
rowOff = row.offset();
if (rowOff.top < 10) {
row.css({position:fixed, top:0});
});
I made it < 10 because you have to fiddle a bit around with when the browser sending the actual number...

I found a piece of code from another answer:
$(document).ready(function() {
var theLoc = $('ul').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('ul').hasClass('fixed')) {
$('ul').removeClass('fixed');
}
} else {
if(!$('ul').hasClass('fixed')) {
$('ul').addClass('fixed');
}
}
});
});
I'm guessing that you should replace the 'ul' part in this code with your class 'leden', and make sure that the class that is added contains the necessary positioning.

to remove extra blank space inside square brackets

[1]: http://jsfiddle.net/uZRQt/1/
This is the link which can be used to remove all html tags inside the square brackets but should include the () round brackets inside teh square brackets.
Now can the regex be modified to remove all the html tags , and blank spaces (&nbps) should be removed but the content inside round bracket should be included :-
for example :-
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[<span>Assignment name</span>]</td> <td>[<span> Total No of staff-months of(hdhdhdh) the assignment</span>]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>'
should give output as
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[Assignment name]</td> <td>[Total No of staff-months of(hdhdhdh) the assignment]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>'

I changed to single quotes for the main string like in http://jsfiddle.net/uZRQt/1/ and the alert works and returns what you asked. But was that the result you were asking for? I haven't understood completely your question.

can the regex be modified to remove all the html tags , and blank
spaces (&nbps) should be removed but the content inside round bracket
should be included :-
Check this one remove All tags and
regex:(?<=\[.*) (<[/]?[^>]*?>| )(?=.*\])

Failing applying jquery slice method over siblings tr (table rows)

The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-

Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});

// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)

Categories

Resources