Jak skopiować tę sekcję strony internetowej po kliknięciu łącza?

Próbuję skopiować fragment strony internetowej po kliknięciu łącza tak, że sekcja jest odtworzony poniżej poprzedniej części, tak jak jak to działa w ten obraz jako przykład- Jak skopiować tę sekcję strony internetowej po kliknięciu łącza?

Robię to na Google Apps scenariusz i tu jest mój kod

code.gs

function doGet(e) { 
    return HtmlService.createHtmlOutputFromFile('HTML') 
     .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
}

HTML.html

<html> 
<head> 
    <base target="_top"> 

    <style type="text/css"> 
     .contentBackground { 
      background-color: #D8D8D8; 
      clear: left; 
      width: 60%; 
      margin: auto; 
      height: 200px display: block; 
     } 

     .uploadFile p { 
      text-align: center; 
      padding: 20px; 
      color: red; 
     } 

     .content p { 
      text-align: center; 
      color: red; 
      padding: 7px; 
     } 

     .dropDown p { 
      text-align: center; 
      padding: 40px; 
      margin-left: 8px; 
      height:; 
     } 

     .moreFiles { 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <div class="contentBackground"> 
     <div class="uploadWrapper"> 
      <div class="fileUpload"> 
       <div class="uploadFile"> 
        <p>Upload File: <span style="color:black"><input type="file" name="uploadField" /></span></p> 
       </div> 

       <div class="content"> 
        <p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p> 
       </div> 
      </div> 
     </div> 

     <div class="dropDown"> 
      <p> 
       Material <select style="max-width: 10%;"> 
        <option value="Paper">Paper</option> 
        <option value="Vinyl Banner">Vinyl Banner</option> 
        <option value="Adhesive Vinyl">Adhesive Vinyl</option> 
        <option value="Polygloss">Polygloss</option> 
        <option value="Translucent Vinyl">Translucent Vinyl</option> 
        <option value="Static Cling Clear">Static Cling Clear</option> 
        <option value="Static Cling White">Static Cling White</option> 
        <option value="Reverse Static Cling">Reverse Static Cling</option> 
        <option value="Outdoor Paper">Outdoor Paper</option> 
        <option value="Backlit Film">Backlit Film</option> 
        <option value="Foam">Foam</option> 
        <option value="Coroplast">Coroplast</option> 
        <option value="Corrugated Board">Corrugated Board</option> 
        <option value="Sintra">Sintra</option> 
        <option value="Canvas">Canvas</option> 
        <option value="Fabric">Fabric</option> 
        <option value="All Cling">All Cling</option> 
       </select> 
       Lamination <select> 
        <option value="None">None</option> 
        <option value="Matte">Matte</option> 
        <option value="Gloss">Gloss</option> 
        <option value="Lexan">Lexan</option> 
        <option value="Erasable">Erasable</option> 
       </select> 
       Mounting <select> 
        <option value="3/16&quot Foam">3/16" Foam</option> 
        <option value="3/16&quot Gator">3/16" Gator</option> 
        <option value="1/8&quot Sintra">1/8" Sintra</option> 
        <option value="24point Card">24point Card</option> 
        <option value="50point Card">50point Card</option> 
        <option value="Adhesive Back">Adhesive Back</option> 
        <option value="MDF">MDF</option> 
        <option value="Coroplast">Coroplast</option> 
        <option value="Masonite">Masonite</option> 
        <option value="020 Styrene">020 Styrene</option> 
        <option value="040 Styrene">040 Styrene</option> 
        <option value="060 Styrene">060 Styrene</option> 
        <option value="080 Styrene">080 Styrene</option> 
        <option value="Corrugated Board">Corrugated Board</option> 
       </select> 
       Ink <select> 
        <option value="Indoor">Indoor</option> 
        <option value="Outdoor">Outdoor</option> 
       </select> 
      </p> 
     </div> 
    </div> 
    <div class="moreFiles"> 
     <a href="#" id="add">Add another file?</a> 
    </div> 
</body> 
</html>

Źródło

2015-11-26 Kali

generalnie nie chcesz używać głowy i ciała tagi html w Google Apps Script. jeśli potrzebujesz dodać rzeczy do głowy dodaj je do głowy używając javascript. https://developers.google.com/apps-script/guides/html/best-practices#dont_use_html_head_or_body_tags – Binvention

ok dzięki za heads up! – Kali

tak, ich filtr/procesor caja może zepsuć sytuację, jeśli nie stosujesz się do przewodnika dobrych praktyk. – Binvention

Jeśli zdecydujesz się użyć jQuery, możesz użyć metody .clone().

$("#add").on("click", function() { 
    var $last = $(".contentBackground").last(); 
    $last.clone().insertAfter($last); 
});

JSFiddle

Źródło

2015-11-26 19:26:48

Jak dodać jQuery do skryptu aplikacji Google? kiedy przełączam to, co mam w code.gs dla tego, co polecasz, daje mi to błąd, który mówi: ReferenceError: "$" nie jest zdefiniowane. (wiersz 1, plik "") – Kali

@Kali - Znalazłem ten zasób od [Programiści Google] (https://developers.google.com/apps-script/guides/html/best-practices#take_advantage_of_jquery). Musisz tylko dołączyć bibliotekę jQuery. na przykład '' –

czy mogę dodać to do mojej sekcji code.gs lub do mojej. sekcja html? – Kali

Jak skopiować tę sekcję strony internetowej po kliknięciu łącza?

Odpowiedz

Powiązane problemy