Репликация записей и XML с помощью JavaScript

Я создаю систему пользовательского представления, в которой пользователь может вводить данные, а XML будет экспортироваться (что может быть прочитано другим программным обеспечением по строке), но я сталкиваюсь с проблема, когда, когда я реплицирую форму для ввода пользователем информации, XML берет только информацию из первого.Репликация записей и XML с помощью JavaScript

Любые предложения о том, как это сделать?

Персональный код теста:

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

источник

2016-11-16 JooHyun

Измените идентификаторы для классов использовать цикл, чтобы получить все записи

<!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>

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

источник

2016-11-16 06:20:20 madalinivascu

Большое вам спасибо! ^,^ – JooHyun

не забудьте принять ответ: P – madalinivascu

Нажмите на гигантскую галочку <3 – JooHyun

Репликация записей и XML с помощью JavaScript

ответ

Смежные вопросы