Question

我的表格如下：

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

我想仅更改文字8: Tap on APN and Enter <B>www</B>.
不影响隐藏的领域

我正在尝试jQuery但没有找到解决方案

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

Answer 1

在jquery中使用文本节点是一项特别精细的工作，大多数操作都是为了完全跳过它们。

为什么不在<span>内包装你需要替换的内容，而不是经历过小心避免错误节点的麻烦：

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

然后：

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

Answer 2

删除textnode，并将<b>标记替换为您需要的任何内容，而不必触及输入：

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

FIDDLE

Answer 3

$('#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/

Answer 4

派对有点晚，但JQuery change inner text but preserve html至少有one approach not mentioned here：

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

如果不修复文字，您可以使用（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);

Answer 5

怎么样：

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

Answer 6

在ptag中包含您要删除的内容，然后您可以执行以下操作：

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

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

使用包含其他元素的td的jQuery替换td中的文本

6 个答案: