简单的 JavaScript HTML 表格生成器
[英]Simple JavaScript HTML table generator
问题描述
This is JavaScript HTML table generator.
这是 JavaScript HTML 表格生成器。
Input (from textarea) <label> <content> //each line Order by <label>
I need to input the values like that: Input Values or我需要输入这样的值：输入值或
A 1
A 2
A 3
B 1
B 2
C 1
C 2
C 3
C 4
And the output should be :输出应该是：
Here is the problem.这是问题所在。 I don't have ideas to finish my work, but i try my best to code.Can anyone help me?Please!!我没有完成我的工作的想法，但我尽力编码。有人可以帮助我吗？拜托！！
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
}
And the html code:和 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>
2 个解决方案
解决方案1
1 2015-11-19 04:29:32
I have create sample based on your requirement.我已经根据您的要求创建了示例。
Please check this code.请检查此代码。
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>
Hope this will help you.希望这会帮助你。
解决方案2
0 已采纳 2015-11-19 08:05:38
I gave it a try too.我也试了一下。 This approach should give you the big idea behind the dynamically created DOM elements.这种方法应该为您提供动态创建的 DOM 元素背后的重要思想。 I think this is a more production-friendly version of the algorithm, given that only native JS is being used.我认为这是一个对生产更友好的算法版本，因为只使用了原生 JS。
The main difference with my approach is that it works entirely with dynamic DOM Elements to build the table instead of static html markup.与我的方法的主要区别在于它完全使用动态 DOM 元素来构建表格而不是静态 html 标记。 In some cases it can be easier to read and more flexible, especially if you want to work with tag attributes dynamically.在某些情况下，它更易于阅读且更灵活，尤其是当您想动态处理标签属性时。 I also managed to reduce the complexity by 1 level.我还设法将复杂性降低了 1 级。 Here's my try at it to make it simple and readable:这是我尝试使其简单易读的方法：
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>
Hope this helps.希望这可以帮助。 Have a nice one!有一个不错的！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.