将Javascript变量拆分为html表
将Javascript变量拆分为html表
提问于 2018-06-01 03:59:42
我无法将一个包含表单中5个字段的变量拆分为同一行的5个不同部分中的表。如果能得到任何帮助，我将不胜感激。
// The section below this line is where the variable from the form input
// is inserted, but the role is not split into 5 different cells.
function getInfo() {
var info = document.getElementById("form1");
var text = "";
var i;
for (i=0; i < info.length; i++) {
text += info.elements[i].value;
}
document.getElementById("data").innerHTML = text;
// Log the form input into the console
console.log(text);
}div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Form HTML -->
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>
<table style="width:100%">
<tr>
<th>First Name</th>
</tr>
<tr id ="data">
</tr>
</table>
回答 2
Stack Overflow用户
发布于 2018-06-01 04:12:53
根据当前的方法，需要将表单元格标记添加到字符串中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Custom css -->
<style>
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
</style>
<title>My Web Page</title>
</head>
<body>
<!-- Form HTML -->
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
<tr id ="data">
</tr>
</table>
<!-- Javascript function for the user input -->
<script type="text/javascript">
function getInfo() {
var info = document.getElementById("form1");
var text = "";
var i;
for (i=0; i < info.length; i++) {
text += "<td>"+info.elements[i].value+"</td>";
}
document.getElementById("data").innerHTML = text;
// Log the form input into the console
console.log(text);
}
</script>
<p>Click the button below to display your entry.</p>
<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>
</body>
</html>
Stack Overflow用户
发布于 2018-06-01 04:15:04
如果希望将数据放到不同的列中，则必须创建这些列并将它们追加到一行中。
您不希望将数据连接到单个var中，因为您希望将数据拆分为多个列。
你可以这样做：
function getInfo() {
const info = document.getElementById("form1");
const row = document.getElementById("data");
for (let i =0; i < info.length; i++) {
// Make a new column
const col = document.createElement('td');
// Make a new text node
const colText = document.createTextNode(info.elements[i].value);
// Append text to column
col.appendChild(colText);
// Append column to the row (id of data)
row.appendChild(col);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50631915
复制相关文章
相似问题