工作演示

Question

我正在尝试获取一个用户使用属性contenteditable="true"编辑的表格，但我不想在输出中显示此内容。

所以要输出我这样做：

$(document).ready(function() { 
  $("#btn").click(function(){
    var text = $("#tab").html(); // taking the content
    var res = text.replace('<td contenteditable="true">','<td>'); //trying to replace   
    document.getElementById("output").innerHTML = res ; //output data
  });
});

问题是代码忽略了替换，你知道为什么吗？

==== 编辑：

对不起家伙我觉得我一点也不清楚。唯一的问题是OUTPUT，而不是html，我将html传递给用户副本的文本区域等。

请在此处查看代码：https://jsfiddle.net/mnpxwhx6/

当我执行输出时，我不希望TD带有可编辑的属性。

由于

Answer 1

如果正确解释问题，则不需要.replace()？如果您要删除contenteditable元素的td属性，可以克隆#tab元素使用.removeAttr()从contenteditable html删除td在设置html

的textarea之前的元素

＆＃13;

textarea {
  width: 400px;
  height: 400px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn").click(function() {
        var text = $("#tab").clone();
        text.find("td[contenteditable]").each(function() {
          $(this).removeAttr("contenteditable")
        })
        document.getElementById("output").innerHTML = text[0].innerHTML;
      });
      delete text;
    });
  </script>
</head>

<body>

  <div id="tab">
    <table border=1>
      <thead>
        <tr>
          <td></td>
          <td contenteditable="true">
            48-50
          </td>
          <td contenteditable="true">
            50-52
          </td>
          <td contenteditable="true">
            52-54
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>medida1</th>
          <td contenteditable="true">
            104cm
          </td>
          <td contenteditable="true">
            108cm
          </td>
          <td contenteditable="true">
            112cm
          </td>
        </tr>
        <tr>
          <th>medida2</th>
          <td contenteditable="true">
            106cm
          </td>
          <td contenteditable="true">
            110cm
          </td>
          <td contenteditable="true">
            114cm
          </td>
        </tr>
        <tr>
          <th>medida3</th>
          <td contenteditable="true">
            122cm
          </td>
          <td contenteditable="true">
            126cm
          </td>
          <td contenteditable="true">
            130cm
          </td>
        </tr>
        <tr>
          <th>medida4</th>
          <td contenteditable="true">
            69cm
          </td>
          <td contenteditable="true">
            70cm
          </td>
          <td contenteditable="true">
            71cm
          </td>
        </tr>
        <tr>
          <th>medida5</th>
          <td contenteditable="true">
            38cm
          </td>
          <td contenteditable="true">
            40cm
          </td>
          <td contenteditable="true">
            42cm
          </td>
        </tr>
      </tbody>
    </table>

  </div>

  <button id="btn">Show HTML</button>
  <hr>

  <textarea id="output" rows="4" cols="50">

  </textarea>

＆＃13;

jsfiddle https://jsfiddle.net/mnpxwhx6/1/

Answer 2

尝试使用正则表达式替换字符串。

$(document).ready(function() { 
  $("#btn").click(function(){
    var text = $("#tab").html(); // taking the content
    var res = text.replace(/^.*<td.*contenteditable="true".*>$/gm,'<td>'); 
    $("#output").text(res) ; //output data
  });
});

工作演示

https://jsfiddle.net/mnpxwhx6/2/

Answer 3

您似乎希望从contenteditable=true删除<td>属性。

这不是解决问题的方法。相反，请尝试使用jQuery select by attribute选择器来定位所需的TD并更改属性：

$('table').find('[contenteditable=true]').attr('contenteditable','false');

jsFiddle Demo

如何将HTML作为String传递给TextArea

3 个答案:

工作演示