Question

我有一个报告，其中打印出记录行。我可以在此报告上添加和删除行，也可以编辑每列。

问题是保存文档时，我在单击事件中使用了波纹管。
var htmlText = "<html>" + $("html").html() + "</html>";

这对除动态添加的行以外的所有内容都适用。行在那里，但是没有输入到textareas中的文本。

为什么不获取此信息？

Answer 1

每当用户更改了任何输入时，浏览器都不会将textarea中的值更新回DOM中，同样适用于输入和选择。因此，一种解决方法是，在保存HTML文件之前自己将更改应用于DOM。

$("#insert").on("click", function() {
  $("<textarea />").appendTo($("#htmlBody")).val("This is a dynamic textarea");
  $("<input type=\"text\" value=\"\" />").appendTo($("#htmlBody")).val("This is a dynamic input");
});

$("#save").on("click", function() {
  alert($("#htmlBody").html());
});

$("#saveTextarea").on("click", function() {
  $("textarea").each(function(index, item) { $(item).text($(item).val()); })
  $("input").each(function(index, item) { $(item).attr("value", $(item).val()); })
  alert($("#htmlBody").html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="htmlBody">
  <textarea>This is a textarea</textarea>
  <input type="text" value="This is an input" />
</div>
<button id="insert">Insert Textarea</button>
<button id="save">Save</button>
<button id="saveTextarea">Save With Textarea Value</button>

Answer 2

简单地：

  $("#save").click(function(){
  
    $("textarea").text(function(){
    	return $(this).val()
    })
    
    $("input").attr("value", function(){
    	return $(this).val()
    })
    
    $("#result").text($("#form").html());
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="form">
  <textarea></textarea><br>
  <textarea></textarea><br>
  <input type="text"><br>
  <input type="text"><br>
</div>

<button id="save">Save</button>

<div id="result"></div>

捕获整个文档，包括动态文本区域值

2 个答案: