这是JavaScript HTML表格生成器。
Input (from textarea) <label> <content> //each line Order by <label>
我需要输入这样的值: Input Values 或
A 1
A 2
A 3
B 1
B 2
C 1
C 2
C 3
C 4
输出应为:
这是问题所在。我没有完成工作的想法,但我尽力编码。任何人都可以帮助我吗?请!!
function progress(){
var txt = document.form.txt.value;
var line = txt.split("\n"); // every line of context
var line_num = line.length; // total line
for (var i = 0; i<line_num; i++)
{
var seq = line[i].split(" "); //seq[0]: name of label, seq[1] : context
// CODE START
// CODE END
}
var out="<table>"; // if the value exist, using table to display
// CODE START
// CODE END
out=out+"</table>"
document.getElementById('out').innerHTML=out; // display the result
}
和html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> HW3 </title>
<script type="text/javascript" src="abc.js"></script>
<style type = "text/css">
table
{
width: 300px;
border:1px solid black;
border-collapse : collapse;
}
tr td
{
border:1px solid black;
}
</style>
</head>
<body>
<form name = "form" enctype="multipart/form-data" id="form" method="post" onsubmit="return false;">
<label><textarea name="txt" rows="20" cols = "40"></textarea></label>
<br>
<button type="submit" onclick = "javascript:progress()">Submit</button>
</form>
<p id= "out"></p>
</body>
</html>
答案 0 :(得分:1)
我已根据您的要求创建样本。
请检查此代码。
function progress(){
var txt = document.form.txt.value;
var line = txt.split("\n"); // every line of context
var line_num = line.length; // total line
var uniqueValue = [];
var values = [];
for (var i = 0; i<line_num; i++)
{
var seq = line[i].split(" "); //seq[0]: name of label, seq[1] : context
if (uniqueValue.indexOf(seq[0]) == -1)
{
uniqueValue.push(seq[0]);
values[uniqueValue.indexOf(seq[0])] = new Array();
}
values[uniqueValue.indexOf(seq[0])].push(seq[1]);
}
var maxLength = 0;
var length = values.length;
for (i = 0; i < length; i++)
{
if(values[i].length > maxLength)
maxLength = values[i].length
}
if (length > 0)
{
var out = "<table>"; // if the value exist, using table to display
for (var i = 0; i <= maxLength; i++)
{
out = out + "<tr>"
for (var j = 0; j < length; j++)
{
if(i==0)
{
out = out+ "<th>"+ uniqueValue[j] +"</th>";
}
else
{
if (values[j][i - 1])
out = out + "<td>" + values[j][i - 1] + "</td>";
else
out = out + "<td></td>";
}
}
out = out + "</tr>"
}
out = out + "</table>"
}
document.getElementById('out').innerHTML=out; // display the result
}
table
{
width: 300px;
border:1px solid black;
border-collapse : collapse;
}
tr td, tr th
{
border:1px solid black;
}
<form name = "form" enctype="multipart/form-data" id="form" method="post" onsubmit="return false;">
<label><textarea name="txt" rows="20" cols = "40"></textarea></label>
<br>
<button type="submit" onclick = "javascript:progress()">Submit</button>
</form>
<p id= "out"></p>
希望这会对你有所帮助。
答案 1 :(得分:0)
我也尝试了一下。这种方法应该为您提供动态创建的DOM元素背后的重要思想。我认为这是一个更加生产友好的算法版本,因为只使用原生JS。
与我的方法的主要区别在于它完全使用动态DOM元素来构建表而不是静态html标记。在某些情况下,它可以更容易阅读和更灵活,特别是如果您想动态处理标记属性。我还设法将复杂性降低了1级。这是我的尝试,使其简单易读:
document.getElementById("btn").addEventListener("click", function(event) {
progress();
}, false);
function progress(){
var txt = document.form.txt.value;
var line = txt.split("\n"); // every line of context
var line_num = line.length; // total line
// Build label->content association
var inputs = {};
for (var i = 0; i<line_num; i++)
{
if (line[i] != "") {
var seq = line[i].split(" "); //seq[0]: name of label, seq[1] : context
var label = seq[0];
var content = seq[1];
if (inputs[label] === undefined) {
inputs[label] = [content];
} else {
inputs[label].push(content);
}
}
}
// For a given MxN table output
var M = Object.keys(inputs).length;
var N = 0; // Unknown for now
var tableElement = document.createElement("table");
tableElement.id = "out";
// Generate header
var headerElement = document.createElement("tr");
for (var label in inputs) {
var tdElement = document.createElement("td");
tdElement.appendChild(document.createTextNode(label));
headerElement.appendChild(tdElement);
// calculate N dimension
var contents = inputs[label].length;
if (N < contents) {
N = contents;
}
}
tableElement.appendChild(headerElement);
// Generate rows
for (var i=0; i<N; i++) {
var trElement = document.createElement("tr");
for (var j=0; j<M; j++) {
var tdElement = document.createElement("td");
var label = Object.keys(inputs)[j];
if (inputs[label].length > i) {
var content = inputs[label][i];
tdElement.appendChild(document.createTextNode(content));
}
trElement.appendChild(tdElement);
}
tableElement.appendChild(trElement);
}
var out = document.getElementById('out');
out.parentNode.removeChild(out);
document.body.appendChild(tableElement); // display the result
}
table {border-collapse:collapse;}
tr,td {border:solid 1px #000;}
td {width:100px;}
<form name = "form" enctype="multipart/form-data" id="form" method="post" onsubmit="return false;">
<label>
<textarea name="txt" rows="20" cols = "40">
A 1
A 2
A 3
B 1
B 2
C 1
C 2
C 3
C 4
</textarea>
</label>
<br>
<button id="btn" type="submit">Submit</button>
</form>
<p id= "out"></p>
希望这会有所帮助。 祝你好一个!