Simple JavaScript HTML table generator

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>

Solution

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!

For reference, you can see the HTML Table Generator.