我正在努力寻找下面的解决方案。我有一个HTML页面，其中包含一个用户可以输入信息的表单。有8个变量要输入，一旦用户点击表单上的提交，我希望JQuery / JavaScript创建一个动态表条目，用所提供的信息填充页面。
我有我想使用的表格片段，但我不知道从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>
答案 0 :(得分：-1)
您可以将模板放在隐藏的表格中。然后在提交时替换＆＃34; VariableX＆＃34;带有相应输入文本的文本。为此，如果您为每个输入提供相应的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>
确保在运行时最大化代码段输出窗口，否则滚动条将会有点令人困惑。