用JavaScript复制条目和XML

Replicating entries and XML with JavaScript

本文关键字：XML JavaScript 复制      更新时间：2023-09-26

我正在构建一个用户提交系统，其中用户可以输入数据，XML将被导出(可以由不同的软件读取)，但是我遇到了一个问题，当我复制用户输入信息的表单时，XML只从第一个获取信息。

有什么建议吗?

个人测试代码:

HTML: 

$(function () {
        $('#SubmitButton').click(update);
      });
    
      var added = [
        ''t't
<bam_file desc='"<?channeldescription?>'" record_number='"<?channelrecordnumber?>'" hex_color='"<?channelhexcolor?>'" bam_link='"<?channelbamlink?>'">',
        ''t't</bam_file>
'
      ].join(''r'n');
    
      var adding = [
        ''t't
<bam_file desc='"<?channeldescription?>'" record_number='"<?channelrecordnumber?>'" hex_color='"<?channelhexcolor?>'" bam_link='"<?channelbamlink?>'">',
        ''t't</bam_file>
'
      ].join(''r'n');
    
      function update() {
        var variables = {
          'channeldescription': $('#channeldescription').val(),
          'channelrecordnumber': $('#channelrecordnumber').val(),
          'channelhexcolor': $('#channelhexcolor').val(),
          'channelbamlink': $('#channelbamlink').val()
        };
    
        var newXml = added.replace(/<'?('w+)'?>/g,
          function(match, name) {
            return variables[name];
          });
    
        var finalXML = newXml;
    
        $('#ResultXml').val(finalXML);
        $('#DownloadLink')
          .attr('href', 'data:text/xml;base64,' + btoa(finalXML))
          .attr('download', 'bamdata.xml');
        $('#generated').show();
      }
    
      $(function () {
        $("#CloneForm").click(CloneSection);
      });
    
      function CloneSection() {
        added = added + ''n' + adding;
        $("body").append($("#Entries:first").clone(true));
      }
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="Entries" name="Entries">
  <legend class="leftmargin"> Entry </legend>
  <form class="form">
    <fieldset>
      <div class="forminput">
        <label for="channel-description" class="formtextarea">Description</label>
        <textarea id="channeldescription" name="channeldescription" type="text"></textarea>
      </div>
      <div class="forminput">
        <label for="channel-record_number">Record number</label>
        <input id="channelrecordnumber" name="channelrecordnumber"/>
      </div>
      <div class="forminput">
        <label for="channel-hex_color">Hex color</label>
        <input id="channelhexcolor" name="channelhexcolor"/>
      </div>
      <div class="forminput">
        <label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
        <input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
      </div>
    </fieldset>
  </form>
</div>
</body>
<div id="Cloning" class="button_fixed">
  <p>
    <button id="CloneForm">Add another entry</button>
    <button id="SubmitButton">Generate XM</button>
  </p>
</div>
<div id="generated" style="display:none">
  <h2>bamdata.xml</h2>
  <a href="#" id="DownloadLink">Download XML</a>
  <textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>

http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J

将id更改为类，使用循环获取所有条目

   <!DOCTYPE html>
<html>
<head>
  <script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    .leftmargin {
      margin-left: 2%;
    }
    .form {
      background-color: #CBE8BA;
      border-radius: 25px;
      margin-left: 2%;
      margin-right: 2%;
      padding-top: 1%;
      padding-bottom: 1%;
    }
    .forminput {
      padding-left: 1.5%;
      padding-top: 0.5%;
      display: flex;
    }
    .button_fixed {
      position: fixed;
      margin-left: 2%;
      bottom: 1%;
    }
  </script>
  <script>
  $(function () {
    $('#SubmitButton').click(function(){
         var finalXML = '';
         $(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
           $('#ResultXml').val(finalXML);
    $('#DownloadLink')
      .attr('href', 'data:text/xml;base64,' + btoa(finalXML))
      .attr('download', 'bamdata.xml');
    $('#generated').show();
            });
    });
  });
  var added = [
    ''t't<bam_file desc='"<?channeldescription?>'" record_number='"<?channelrecordnumber?>'" hex_color='"<?channelhexcolor?>'" bam_link='"<?channelbamlink?>'">',
    ''t't</bam_file>'
  ].join(''r'n');
  var adding = [
    ''t't<bam_file desc='"<?channeldescription?>'" record_number='"<?channelrecordnumber?>'" hex_color='"<?channelhexcolor?>'" bam_link='"<?channelbamlink?>'">',
    ''t't</bam_file>'
  ].join(''r'n');
  function update(finalXML,v) {
    var variables = {
      'channeldescription': $(v).find('.channeldescription').val(),
      'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
      'channelhexcolor': $(v).find('.channelhexcolor').val(),
      'channelbamlink': $(v).find('.channelbamlink').val()
    };
    var newXml = added.replace(/<'?('w+)'?>/g,
      function(match, name) {
        return variables[name];
      });
    return newXml;

  }
  $(function () {
    $("#CloneForm").click(CloneSection);
  });
  function CloneSection() {
    $("body").append($(".Entries:first").clone(true));
  }
  </script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
  <form class="form">
    <fieldset>
      <div class="forminput">
        <label for="channel-description" class="formtextarea">Description</label>
        <textarea class="channeldescription" name="channeldescription" type="text"></textarea>
      </div>
      <div class="forminput">
        <label for="channel-record_number">Record number</label>
        <input class="channelrecordnumber" name="channelrecordnumber"/>
      </div>
      <div class="forminput">
        <label for="channel-hex_color">Hex color</label>
        <input class="channelhexcolor" name="channelhexcolor"/>
      </div>
      <div class="forminput">
        <label for="channel-bam_link">BAM file Repsitory Link</label>
        <input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
      </div>
    </fieldset>
  </form>
</div>
</body>
<div id="Cloning" class="button_fixed">
  <p>
    <button id="CloneForm">Add another entry</button>
     <button id="SubmitButton">Generate XM</button>
  </p>
</div>
<div id="generated" style="display:none">
  <h2>bamdata.xml</h2>
  <a href="#" id="DownloadLink">Download XML</a>
  <textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>

演示:http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4

相关文章：