Question

好的，我有这个html结构

<table id="list">
    <thead><tr><th>Name</th></tr></thead>
    <tbody>
         <tr><td class="container"><input class="myname" type="text" value="Roi" /></td></tr>
         <tr><td class="container"><input class="myname" type="text" value="Sam" /></td></tr>
    </tbody>
</table>

我想通过电子邮件发送这个表格没有问题，我面临的问题是如果我发送它的确如此，它有点错误，因为有一个input元素

所以我的计划是我将仅使用普通值替换inputs，我可以使用以下代码实现此目的：

$( ".myname" ).each(function( index ) {
    var name = this.val();
    this.closest(".container").html(name);
});

如果我们在谈论实际页面，那会有效但我不想改变实际的页面，所以我提出了这个：

var html = jQuery("#list").html();
html = jQuery.parseHTML(html);

现在，我如何在html变量中执行相同的操作？

Answer 1

我设法通过以下

得到了我想要的东西

jQuery('#send').click(function() {
    var html = jQuery("#list").html();
    jQuery(html).find('.container').each( function() {
        var oldcontent = jQuery(this).html();
        var newcontent = jQuery(this).children(".myname").val();
        html = html.replace(oldcontent, newcontent);
    });
});

我想我可以将其用作string，而不需要parseHTML并使用replace()功能。感谢Arun的回答，我无法使用他的答案，因为在某些情况下<td>和replaceWith中有多个元素将不是最佳方式，因为它只是替换单个元素。

我仍然愿意接受更好的答案我觉得我的答案有点作弊，并假设没有相同的名字。

但如果.myname类有自己的ID，它将防止出现同名错误。

Answer 2

尝试

//create a temp cloned version of the table
var $div = $('<div />').append(jQuery("#list").clone());

//alter the temp html structure
$div.find('.myname').replaceWith(function () {
    return this.value;
});

//obtain the updated html from the temp element
var html = $div.html();

$('#log').text(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="list">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="container">
        <input class="myname" type="text" value="Roi" />
      </td>
    </tr>
    <tr>
      <td id="container">
        <input class="myname" type="text" value="Sam" />
      </td>
    </tr>
  </tbody>
</table>
<div id="log"></div>

改变jQuery的解析html

2 个答案: