Replace text inside td using jQuery having td containing other elements

Question

My table is as follows:

<table id='demoTable'>
   <tr>
       <td>8: Tap on APN and Enter <B>www</B>.
           <INPUT id=h150000000000000109743 class=hid value="test value" type=hidden>
           <INPUT id=h250000000000000109743 class=hid1 value="26,222,98,10,50000000000000109744,T,~25,221,99,10,,T,www" type="hidden">
       </td>
   </tr>
</table>

I want to change the text only 8: Tap on APN and Enter <B>www</B>.
without affecting the hidden fields

I am trying jQuery but not finding the solution

function changeText() {
    $("#demoTable td").each(function () {
        for (var i = 0; i < $(this).children.length; i++) {
            alert($(this).children(i).val());
        }
        // alert($(this).html());
        // $(this).text("hello");
        // alert($(this).html());
    });
}

I have the same text in another language I want to replace with that. The new text will also contain www — शेखर, Dec 11 '12 at 09:43
Possible duplicate of [JQuery change inner text but preserve html](https://stackoverflow.com/questions/5232862/jquery-change-inner-text-but-preserve-html) — serv-inc, Aug 03 '17 at 15:43

Ja͢ck · Accepted Answer · 2015-02-05T00:14:55.330

76

Using text nodes in jquery is a particularly delicate endeavour and most operations are made to skip them altogether.

Instead of going through the trouble of carefully avoiding the wrong nodes, why not just wrap whatever you need to replace inside a <span> for instance:

<td><span class="replaceme">8: Tap on APN and Enter <B>www</B>.</span></td>

Then:

$('.replaceme').html('Whatever <b>HTML</b> you want here.');

edited Feb 05 '15 at 00:14

answered Dec 11 '12 at 09:46

Ja͢ck

170,779
38
263
309

You are right but the code is all ready running on the basis of classes on the td. So If i put inside my td will the appearance of the span will change or the td class will applied on the span tag also – शेखर Dec 11 '12 at 09:50
@krshekhar Any style you define on the `` will be "inherited" by the `` you put inside. – Ja͢ck Dec 11 '12 at 09:57
Seems like lots of operations on a td via jQuery is buggy no matter what. Using vanilla JS seems to be fine though... Anybody have a clear explanation as to why? – Ash Blue May 30 '13 at 17:54
@AshBlue I'm not aware of buggy behaviour. jQuery is just not well suited for working on text node, in most cases that's actually a desired trait :) – Ja͢ck May 30 '13 at 23:02
text how to replace text inside td using id..? – saidesh kilaru Nov 13 '13 at 13:37

adeneo · Answer 2 · 2012-12-11T09:22:56.563

5

Remove the textnode, and replace the <b> tag with whatever you need without ever touching the inputs :

$('#demoTable').find('tr > td').contents().filter(function() {
    return this.nodeType===3;
}).remove().end().end()
  .find('b').replaceWith($('<span />', {text: 'Hello Kitty'}));

FIDDLE

edited Dec 11 '12 at 09:22

answered Dec 11 '12 at 09:17

adeneo

312,895
29
395
388

what is the meaning of this.nodeType===3. Can you explain it a bit. – शेखर Dec 11 '12 at 09:26
@krshekhar - Nodes have different types, a textnode that's not wrapped inside an element would have type of 3, so this gets the text that's not wrapped in an element, i.e. `8: Tap on APN and Enter ` and removes it and replaces the `` tag with a span, which can contain anything you'd like, text, html whatever. – adeneo Dec 11 '12 at 09:39
See I have to replace the td text with new text which will also contain www – शेखर Dec 11 '12 at 09:46
@undefined has an answer that does exactly that ! – adeneo Dec 11 '12 at 09:50

score 5 · Answer 3 · answered Dec 11 '12 at 09:22

5

$('#demoTable td').contents().each(function() {
    if (this.nodeType === 3) {
        this.textContent
        ? this.textContent = 'The text has been '
        : this.innerText  = 'The text has been '
    } else {
        this.innerHTML = 'changed';
        return false;
    }
})

http://jsfiddle.net/YSAjU/

answered Dec 11 '12 at 09:22

Ram

143,282
16
168
197

text how to replace text inside td using id..? – saidesh kilaru Nov 13 '13 at 13:37

score 1 · Answer 4 · answered Dec 11 '12 at 09:12

1

How about:

function changeText() {
    $("#demoTable td").each(function () {
       $(this).html().replace("8: Tap on APN and Enter <B>www</B>", "");
    }
}

answered Dec 11 '12 at 09:12

webnoob

15,747
13
83
165

1

text how to replace text inside td using id..? – saidesh kilaru Nov 13 '13 at 13:38
1

This should do it: `$("#td_id").text("SET SOMETHING HERE");` – webnoob Nov 13 '13 at 13:54

score 1 · Answer 5 · answered Aug 03 '17 at 15:43

A bit late to the party, but JQuery change inner text but preserve html has at least one approach not mentioned here:

var $td = $("#demoTable td");
$td.html($td.html().replace('Tap on APN and Enter', 'new text'));

Without fixing the text, you could use (snother)[https://stackoverflow.com/a/37828788/1587329]:

var $a = $('#demoTable td');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);

score 0 · Answer 6 · answered Dec 11 '12 at 09:17

0

Wrap your to be deleted contents within a ptag, then you can do something like this:

$(function(){
  $("td").click(function(){ console.log($("td").find("p"));
    $("td").find("p").remove();    });
});

FIDDLE DEMO: http://jsfiddle.net/y3p2F/

answered Dec 11 '12 at 09:17

Vivek S

5,384
8
51
72

I don't have `p` tag inside my td? – शेखर Dec 11 '12 at 09:22
text how to replace text inside td using id..? – saidesh kilaru Nov 13 '13 at 13:39
@saideshkilaru $('#td_id').html('Whatever HTML you want here.'); – Vivek S Nov 14 '13 at 05:56

Replace text inside td using jQuery having td containing other elements

6 Answers6

Linked