Convert the output into a text box to a dynamic table

Question

I’m trying to make a dynamic table for the frequency count of words extracted from an external file. I came across a template, now I’m trying to change the output to display a table instead of showing the results in a text box. Two columns should appear triggered by both onClick buttons that display the word and its frequency of occurrences.

Below is what I have worked so far:

<script type="text/javascript">
        <!--

        var w;
        function openFile(url) {
            w = window.open();
            w.location = url;
        }

        function retrieveText() {
            pre = document.getElementById("count");
            retrieve(w.document.body);

        }
        function retrieve(node) {
            if (node.nodeType == Node.ELEMENT_NODE) {
                for (var m = node.firstChild; m != null; m = m.nextSibling)
                    retrieve(m);
            }
            else if (node.nodeType == Node.TEXT_NODE) {
                var p = document.getElementById("ta_1");
                p.appendChild(document.createTextNode(node.data));
            }
        }

        function data(str, uc){
            // implement regular expressions and regex
            str=str.replace(/<[^>]+>/g,' ');
            var tem, M;
            var Rx= /\b(([a-z])([a-z]*'?[a-z]*))/ig;
            // tests to see whether there is a match in string
            while((M= Rx.exec(str)) != null){
                if(uc!== true) tem= M[2]+M[3];
                else tem= M[1];
                if(!this[tem]) this[tem]= 0;
                this[tem] += 1;
            }
        }

        // This function takes a string argument and increases count for every element in 'this'
        // JS searches key in 'Glossary' prototype
        data.prototype.getCount= function(){
            var count=0;
            for(var w in this){
                // hasOwnProperty - function that takes a string argument
                if(this.hasOwnProperty(w)){
                    count+=this[w];
                }
            }
            return count;
        }

        data.prototype.getList= function(){
            var A= [];
            var tem;
            for(var w in this){
                tem= this[w];
                if(this.hasOwnProperty(w)) A[A.length]= [w,tem];
            }
            A.sort(function(word1,word2){
                if(word1[0]== word2[0])return 0;
                return word1[0]>word2[0]? 1: -1;
            })
            return A;
        }

        // function to display alphab
        data.prototype.toString= function(freq){
            var L, last, nxt;
            var A=this.getList();
            L= A.length;
            for(var i= 0; i<L;i++){
                nxt=A[i][0].charAt(0);
                if(last!=nxt)A[i][0]='\n\n'+nxt+'\n'+A[i][0];
                last=nxt;
                if(freq=== false)A[i]= A[i][0];
                else{
                    A[i]= A[i].join(': ');
                }
            }
            A=A.join(', ').replace(/, \n/g,'\n');
            return L+' different words of '+this.getCount()+'\n\n'+A;
        }

        // function to display freq
        data.prototype.frequency= function(){
            var A= this.getList();
            var C=this.getCount();
            var L= A.length;
            var B= [],v,n;
            while(A.length){
                tem= A.shift();
                v= tem[1];
                n= tem[0];
                if(!B[v]) B[v]= [v];
                B[v].push(n);
            }
            while(B.length){
                tem= B.pop();
                if(tem){

                    A.push(tem.shift()+' occurrence(s): \n\t'+tem.join(', '));
                }
            }
            return 'Word Frequency ('+L+' different words of '+C+' total)\n\n'+A.join('\n')
        }

        if(document.getElementById && Object.hasOwnProperty){
            window.onload= function(){

                var t= document.getElementsByTagName('textarea');
                var b= document.getElementsByTagName('button');

                b[0].onclick= function(){
                    var newdt= new data(t[0].value);
                    t[1].value= newdt.toString(false);
                }
                b[1].onclick= function(){
                    var newdt= new data(t[0].value);
                    t[1].value= newdt.frequency();
                }
            }
        }
-->

    </script>

</head>

<body>

<h1>Word Counter</h1>

<div>
<p>Filename: <input id = "url" name="url" size=15 type="Text"/></p>
<a href="javascript:openFile(document.getElementById('url').value)">
    Open document</a>
<a href="javascript:retrieveText(w.document.body)">Retrieve text</a><br/>



    <textarea id="ta_1" rows="20">

    </textarea>
    <pre id="count"> &nbsp; </pre><br/>
</div>
<div>
    <p>
        <button>Alphabetical Order</button>
        <button >Frequency Order</button></p>


    <textarea id="ta_2" rows="20">
    </textarea>

</div>

<div id="freqTable"></div>


</body>
</html>

Answer 1

The Function Retrieve is the one that is changing the screen by the way.

function retrieve(node) {
            if (node.nodeType == Node.ELEMENT_NODE) {
                for (var m = node.firstChild; m != null; m = m.nextSibling)
                    retrieve(m);
            }
            else if (node.nodeType == Node.TEXT_NODE) {
                var p = document.getElementById("ta_1");
                p.appendChild(document.createTextNode(node.data));
            }
        }

Note that it retrieves the "ta_1" element and creates a text within it, which is this Node.data

You will need to work on that part there, and insert your result into a table. You can create a table in html, and then in this Function vc inserts the contents of this table.