Question

我正在开发一个项目，其中我有一个包含html表的div，而html表又包含一个标题行和任意数量的表主体行。

添加的行包含文本区域，文本框和7个选择输入。

我需要将div中的所有内容（包括表格外的按钮等以及textareas中的所有输入值和选择选项）复制到字符串中。我这样做是为了添加＆＃34;快照＆＃34;将div作为文件（在IE11中使用ActiveXObject），将其发送给其他人，他们打开文件并执行与我一样的操作。

通过使用$（divID）.html（），我有80％的工作版本，但这并没有得到选择和文本输入值。

我已经使用了clone（）以及修复克隆插件来尝试这个，它现在可以很好地运行（获取所有内容，当我附加到正文时它会完美复制）但我可以＆＃39;似乎将对象创建为字符串格式并再次返回（对象 - ＆gt;文本文件 - ＆gt;其他用户 - ＆gt;文本文件 - ＆gt;对象）。

这可能吗？

我需要以文本格式获取数据的原因是因为我需要能够传输完整的＆＃34;会话＆＃34;到另一个用户，这个文件需要保存到sharepoint库，以便访问它。我现在可以将文件发送到库的唯一方法是通过电子邮件发送到库（目前还不足以使用js将文件存入库）。

我是否可以更好地循环浏览页面上的每个元素并将所有内容都放在JSON格式中？我对js和学习很新。

欢迎所有建议。

Answer 1

您必须在元素上设置attributes。通常建议您远离属性并使用prop()，因为当HTML加载设置默认值然后属性从那里接管时使用属性。但在这种情况下，这正是您想要修改的内容。此外，由于您正在弄乱属性，因此首先创建副本并修改它并没有什么坏处。

function serializeWithValues($el) {

  var $orig = $el,
      $t = $orig.clone();

  var $originalSelects = $orig.find('select');

  // Manual clone select values
  $t.find('select').each(function(index, item) {
    //set new select to value of old select
    $(item).val($originalSelects.eq(index).val());
  });

  $t.find(":input").each(function() {
    var $this = $(this);

    switch ($this[0].type) {
      case "checkbox":
      case "radio":
        if ($this.is(":checked"))
          $this.attr("checked", "checked");
        break;
      case "text":
      case "hidden":
        $this.attr("value", $this.val());
        break;
      case "select-one":
        $this.find(":selected").attr("selected", "true");
        break;
      case "select-multiple":
        $this.val() && $this.val().forEach(function(t) {
          $this.find("[value=" + t + "]").attr("selected", "selected");
        })
        break;
      case "textarea":
        $this.html($this.val());
        break;
      default:
        break;
    }

  });

  return JSON.stringify($t.html());
}

function serializeWithValues($el) {

  var $orig = $el,
      $t = $orig.clone();

  var $originalSelects = $orig.find('select');

  // Manual clone select values
  $t.find('select').each(function(index, item) {
    //set new select to value of old select
    $(item).val($originalSelects.eq(index).val());
  });

  $t.find(":input").each(function() {
    var $this = $(this);

    switch ($this[0].type) {
      case "checkbox":
      case "radio":
        if ($this.is(":checked"))
          $this.attr("checked", "checked");
        break;
      case "text":
      case "hidden":
        $this.attr("value", $this.val());
        break;
      case "select-one":
        $this.find(":selected").attr("selected", "true");
        break;
      case "select-multiple":
        $this.val() && $this.val().forEach(function(t) {
          $this.find("[value=" + t + "]").attr("selected", "selected");
        })
        break;
      case "textarea":
        $this.html($this.val());
        break;
      default:
        break;
    }

  });

  return JSON.stringify($t.html());
}

$("button").on("click", function() {

  var dataString = serializeWithValues($("#test"));

  $("#out1").text(dataString);
  rebuild(dataString);


});

// Add the element by string changing ids and radio groups to avoid conflict
var counter = 0;

function rebuild(dataString) {

  var d = $("<div>").append(JSON.parse(dataString));


  d.find("[id]").each(function() {
    $(this).attr("id", $(this).attr("id") + counter++);
  });

  d.find("[type=radio]").each(function(i, r) {
    var n = $(r).attr("name");
    d.find("input[type=radio][name=" + n + "]").attr("name", n + counter++);
  });


  $("body").append(d);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <input id="inp1" name="inp1" />
  <select id="sel1" name="sel1">
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select id="sel2" name="sel2" multiple size="2">
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <input type="checkbox" name="chk1" value="1" />
  <input type="checkbox" name="chk2" value="2" />

  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="hidden" name="hid1" value="still here" />
  <textarea name="text1"></textarea>
  <br>
</div>
<button type="button">GetString</button>
<br>
<div id="out1"></div>
<hr>

Jquery对象为字符串并返回对象

1 个答案: