如何使用jQuery获取包含在td中的HTML？

 

我有一个包含HTML的表格单元格，例如， 

    <td id="test">something&trade; is here</td>

我有一个输入字段，我想用它来编辑表格单元格内的HTML，例如， 

    <input type="text" id="editor" value="">

我需要得到字符串的something&trade; is here something&trade; is here从表单元格，所以我可以把它放入<input>进行编辑。 我努力了 

    var txt=$("#test").text();
    var htm=$("#test").html();

他们两个都返回“ something™在这里 ”而不是原始的HTML - 在设置两个测试值后，我立即在Firebug中创建了一个断点，这就是我所看到的。

阅读jQuery文档，我真的希望.html()方法返回我正在寻找的原始HTML，但这不是正在发生的事情。

我知道Javascript没有像PHP的htmlspecialchars()函数那样的编码器，我必须解决这个问题，但是这四个操作都会产生相同的结果： 

    var enchtm=$("<div/>").text(htm).html();
    var enctxt=$("<div/>").text(txt).html();
    var htmenc=$("<div/>").html(htm).text();
    var txtenc=$("<div/>").html(txt).text();

每个组合都会在编辑字段中放入“ something™在这里 ”，而不是原始HTML。

我如何获得字符串的something&trade; is here something&trade; is here从表单元格到<input>所以我可以编辑它？

它不存在。 在生成DOM之前对实体进行解码，并且.html() （它实际上只是innerHTML属性的包装）不会对其重新编码，因为它没有理由 - something™与表示形式完全一样有效的HTML作为something&trade; 是。 浏览器提供的HTML没有“完全原始”（前字符解码）视图。

建议：提供初始值作为输入的value属性，而不是将其作为div的内容，这样数据流总是单向的，不会出现此问题。

正如其他答案指出的那样，我试图做的事情实际上是不可能的 - 当它被写入DOM文档时，用于填充表格单元格的原始HTML源代码在浏览器中不再存在。

我解决这个问题的方式是在表格单元格上使用title属性，例如， 

    // in the PHP/HTML source document
    <?php $text='something&trade; is here'; // the contents of the table cell ?>
    <td id="test" title="<?php echo htmlspecialchars($text) ?>"><?php echo $text ?></td>

现在的Javascript比较简单： 

    $("#editor").val($("#test").attr("title"));

问题在于这些表格单元中的一些应该有工具提示 - 它们使用title属性 - 有些不是。 幸运的是，可能包含需要编辑的HTML的表格单元格不需要显示工具提示，显示工具提示的表格单元格可以使用.text()方法检索到简单的文本。 我可以在需要工具提示的单元格上设置类属性，例如， 

    <td class="tooltipped" title="This is a tooltip">Hover here!</td>

然后，我可以使用jQuery的.not()方法来抑制单元格上的工具提示：标题正被用于存储编码的HTML： 

    // suppress browser's default tooltip on td titles
    $("td[title]").not(".tooltipped").mouseover(function()
    {   var elem=$(this);
        elem.data("title",elem.attr("title"));
        // Using null here wouldn't work in IE, but empty string does
        elem.attr("title","");
    }).mouseout(function()
    {   var elem=$(this);
        elem.attr("title",elem.data("title"));
    });

Javascript有escape功能，但它在这种情况下不会有帮助，我只是为你做了一个技巧，但留下来得到最好的答案。 

var htm = $("#test").html().replace(/™/g, '&trade;');
$('#editor').val(htm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
<td id="test">something&trade; is here</td>
  </tr>
</table>

<input type="text" id="editor" value="">
链接地址: http://www.djcxy.com/p/40719.html

上一篇: How do I get the HTML contained within a td using jQuery?

下一篇: c++