JavaScript/jQueryはフォーム入力データからHTMLテーブルを動的に構築します

-1

私は以下の解決策を見つけるのに苦労しています。私はユーザーが情報を入力できる形式のHTMLページを持っています。入力する8つの変数があります。ユーザーがフォーム上でsubmitをクリックすると、JQuery/JavaScriptで動的テーブルエントリを作成し、提供された情報をページに入力します。JavaScript/jQueryはフォーム入力データからHTMLテーブルを動的に構築します

私はテーブルスニペットを使用していますが、JS/JQをどこから始めるべきかはわかりません。右方向への任意のポインタ

HMTLフォームデータを助ける：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
    <h1>Team Sheet</h1> 
    </div> 
    <div data-role="main" class="ui-content"> 
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">Show Popup Form</a> 
    <div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;"> 
     <form method="post" action="/action_page_post.php"> 
     <div> 
      <h3>Team Entry</h3> 
      <label for="usrnm" class="ui-hidden-accessible">Variable1:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable1"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable2:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable2"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable3:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable3"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable4:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable4"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable5:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable5"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable6:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable6"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable7:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable7"> 
      <label for="usrnm" class="ui-hidden-accessible">Variable8:</label> 
      <input type="text" name="user" id="usrnm" placeholder="Variable8"> 
      <input type="submit" data-inline="true" value="Submit"> 
     </div> 
     </form> 
    </div> 
    </div> 
    <div data-role="footer"> 
    <h1>Get Calling!</h1> 
    </div> 
</div> 
</body> 
</html>

ダイナミックHTMLの表では、隠されたテーブル内のテンプレートを置くことができ

<tr> 
<td>Variable1</td> 
<td>Variable2</td> 
<td>Variable3</td> 
<td><a href="Variable4" target="_blank" target="_blank" class="external-link" rel="nofollow">Variable5</a></td> 
<td><a href="mailto:Variable6" class="external-link" rel="nofollow">Variable6</a></td> 
<td><a href="mailto:Variable7" class="external-link" rel="nofollow">Variable7</a></td> 
<td>Variable8</td> 
</tr>

出典

2017-08-02 Jack Webb

IDは一意である必要があります – Andreas

'action_page_post.php'とは何ですか？ここでPHPの役割を果たすためにPHPが必要ですか？ – trincot

-1

スニペット。提出すると、 "VariableX"テキストを対応する入力からのテキストに置き換えます。そのためには、各入力に対応するidの値を与えるのが最も簡単です。いずれにしても、現在のidの値は、HTMLでは重複が許可されていないため、値が正しくありません。ここで

はそれが仕事ができる方法です。そうでない場合はスクロールバーがで動作するように少し混乱になりますので、

$("form").submit(function() { 
 
    var html = $("#template").html(); 
 
    $("input[type=text]", this).each(function() { 
 
     html = html.split(this.id).join(this.value); 
 
    }); 
 
    $("#output").append($("<tr>").html(html)).show(); 
 
    $("#myPopup").popup('close'); 
 
    return false; 
 
});

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
<div data-role="page"> 
 
    <div data-role="header"> 
 
    <h1>Team Sheet</h1> 
 
    </div> 
 
    <div data-role="main" class="ui-content"> 
 
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">Show Popup Form</a> 
 
    <div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;"> 
 
     <form> 
 
     <div> 
 
      <h3>Team Entry</h3> 
 
      <label for="Variable1" class="ui-hidden-accessible">Variable1:</label> 
 
      <input type="text" name="user" id="Variable1" placeholder="Variable1"> 
 
      <label for="Variable2" class="ui-hidden-accessible">Variable2:</label> 
 
      <input type="text" name="user" id="Variable2" placeholder="Variable2"> 
 
      <label for="Variable3" class="ui-hidden-accessible">Variable3:</label> 
 
      <input type="text" name="user" id="Variable3" placeholder="Variable3"> 
 
      <label for="Variable4" class="ui-hidden-accessible">Variable4:</label> 
 
      <input type="text" name="user" id="Variable4" placeholder="Variable4"> 
 
      <label for="Variable5" class="ui-hidden-accessible">Variable5:</label> 
 
      <input type="text" name="user" id="Variable5" placeholder="Variable5"> 
 
      <label for="Variable6" class="ui-hidden-accessible">Variable6:</label> 
 
      <input type="text" name="user" id="Variable6" placeholder="Variable6"> 
 
      <label for="Variable7" class="ui-hidden-accessible">Variable7:</label> 
 
      <input type="text" name="user" id="Variable7" placeholder="Variable7"> 
 
      <label for="Variable8" class="ui-hidden-accessible">Variable8:</label> 
 
      <input type="text" name="user" id="Variable8" placeholder="Variable8"> 
 
      <input type="submit" data-inline="true" value="Submit"> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <table id="output" class="ui-table" style="display:none"> 
 
    <thead> 
 
     <tr> 
 
     <th>Variable1</th> 
 
     <th>Variable2</th> 
 
     <th>Variable3</th> 
 
     <th>Variable4</th> 
 
     <th>Variable5</th> 
 
     <th>Variable6</th> 
 
     <th>Variable7</th> 
 
     <th>Variable8</th> 
 
     </td> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="template" style="display:none"> 
 
     <td>Variable1</td> 
 
     <td>Variable2</td> 
 
     <td>Variable3</td> 
 
     <td><a href="Variable4" target="_blank" class="external-link" rel="nofollow">Variable5</a></td> 
 
     <td><a href="mailto:Variable6" class="external-link" rel="nofollow">Variable6</a></td> 
 
     <td><a href="mailto:Variable7" class="external-link" rel="nofollow">Variable7</a></td> 
 
     <td>Variable8</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <div data-role="footer"> 
 
    <h1>Get Calling!</h1> 
 
    </div> 
 
</div>

は、あなたがそれを実行すると、スニペットの出力ウィンドウを最大化することを確認します。

出典

2017-08-02 15:29:45 trincot

JavaScript/jQueryはフォーム入力データからHTMLテーブルを動的に構築します

答えて

関連する問題