scan table data and replace certain string inside html table

Question

I have following table

<table class="data">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            1 data
        </td>
        <td>
            2 data
        </td>
        <td>
            123456789123
        </td>
    </tr>
    </tbody>
</table>

how can I dynamically scan table and replace only values in third table body td values where information like 123456789123 is stored.

This information should be placed with certain character on certain string location so

<td> 123456789123 </td> should be <td> 12345678*12* </td>

Avinash · Accepted Answer · 2015-05-30 04:36:57Z

1

Please find below code block for your need, I have added one specific class to TD for which you want to modify value.

$( document ).ready(function() {
  $('.value_td').each(function(key, ele){
      
    // Getting Original Value
    var original_val = $(ele).text().trim();
    
    // You can change your logic here to modify text
      var new_value = original_val.substr(0, 8) + '*' + original_val.substr(9, 2) + '*';
      
    // Replacing new value
    $(ele).text(new_value);
  });
});

<table class="data">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            1 data
        </td>
        <td>
            2 data
        </td>
        <td class="value_td">
            123456789123
        </td>
    </tr>
    </tbody>
</table>

JS Fiddle

edited May 30, 2015 at 4:36

answered May 29, 2015 at 19:10

Avinash

6,20415 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1765862 Over a year ago

great, how can I change var new_value = original_val+'edited'; to match pattern to change last character end one before last to * character,

lmgonzalves Over a year ago

@user1765862 See my answer, with that you can replace the position that you want.

lmgonzalves · Accepted Answer · 2015-05-29 19:25:28Z

1

To replace the selected texts by indexs, use this:

// replace the 'n'th character of 's' with 't'
function replaceAt(s, n, t) {
    return s.substring(0, n) + t + s.substring(n + 1);
}

$('td:nth-of-type(3)').each(function(i, item){
    $(this).text($(this).text().trim()); // remove extra spaces
    $(this).text(replaceAt($(this).text(), 8, '*')); // replace character in position 8
    $(this).text(replaceAt($(this).text(), 11, '*')); // replace character in position 11
});

See the working demo: https://jsfiddle.net/lmgonzalves/6ppo0xp3/

answered May 29, 2015 at 19:25

lmgonzalves

6,5883 gold badges24 silver badges43 bronze badges

Comments

mixn · Accepted Answer · 2015-05-29 19:20:49Z

0

Try this:

$('.data td:nth-child(3n)').text('foo');

This will change every 3rd td’s text inside .data to foo. Here’s a demo: http://jsbin.com/katuwumeyu/1/edit?html,js,output

Let me know if that helps, I’ll gladly adapt my answer in case this isn’t what you need.

edited May 29, 2015 at 19:20

answered May 29, 2015 at 19:09

mixn

111 silver badge4 bronze badges

2 Comments

user1765862 Over a year ago

thanks, I want not last row but each row with this(any) third td content.

user1765862 Over a year ago

it has dynamic content but that content should be replaced with * on those string locations.

Rodrigo Celebrone · Accepted Answer · 2015-05-29 19:44:39Z

0

You can use jquery ":eq(2)" to track 3rd td position like this:

var el = $('table.data tbody tr td:eq(2)');
el.text(el.text().replace('123456789123','12345678*12*'));

https://jsfiddle.net/v25gu3xk/

or maybe you need to replace char positions:

var el = $('table.data tbody tr td:eq(2)');
var vl = el.text().trim();
el.text(vl.substr(0, 8) + '*' + vl.substr(9, 2) + '*');

https://jsfiddle.net/v25gu3xk/1/

edited May 29, 2015 at 19:44

answered May 29, 2015 at 19:13

Rodrigo Celebrone

3462 silver badges16 bronze badges

Collectives™ on Stack Overflow

scan table data and replace certain string inside html table

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related