Simple JavaScript HTML table generator

Question

This is JavaScript HTML table generator.

 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 :

Example

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:

<!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>

Answer 1

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.

Answer 2

I gave it a try too. This approach should give you the big idea behind the dynamically created DOM elements. I think this is a more production-friendly version of the algorithm, given that only native JS is being used.

The main difference with my approach is that it works entirely with dynamic DOM Elements to build the table instead of static html markup. 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. 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!

Simple JavaScript HTML table generator

Question

2 answers

solution1
1 2015-11-19 04:29:32

solution2
0 ACCPTED 2015-11-19 08:05:38

Simple JavaScript HTML table generator

Question

2 answers

solution1 1 2015-11-19 04:29:32

solution2 0 ACCPTED 2015-11-19 08:05:38

solution1
1 2015-11-19 04:29:32

solution2
0 ACCPTED 2015-11-19 08:05:38