How to Read a text file using Java script and display it in column fashion in HTML.?

StackOverflow https://stackoverflow.com/questions/20073468

  •  31-07-2022
  •  | 
  •  

質問

This is the code which reads the text file using the Jscript and displays it in HTML. But i need it to display it in table.

How to display it in Table. < this is my first question so i hope i get solution >

` Read File (via User Input selection) var reader; //GLOBAL File Reader object for demo purpose only

    /**
     * Check for the various File API support.
     */
    function checkFileAPI() {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            reader = new FileReader();
            return true; 
        } else {
            alert('The File APIs are not fully supported by your browser. Fallback required.');
            return false;
        }
    }

    /**
     * read text input
     */
    function readText(filePath) {
        var output = ""; //placeholder for text output
        if(filePath.files && filePath.files[0]) {           
            reader.onload = function (e) {
                output = e.target.result;
                displayContents(output);
            };//end onload()
            reader.readAsText(filePath.files[0]);
        }//end if html5 filelist support
        else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
            try {
                reader = new ActiveXObject("Scripting.FileSystemObject");
                var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
                output = file.ReadAll(); //text contents of file
                file.Close(); //close file "input stream"
                displayContents(output);
            } catch (e) {
                if (e.number == -2146827859) {
                    alert('Unable to access local files due to browser security settings. ' + 
                     'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' + 
                     'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); 
                }
            }       
        }
        else { //this is where you could fallback to Java Applet, Flash or similar
            return false;
        }       
        return true;
    }   

    /**
     * display content using a basic HTML replacement
     */
    function displayContents(txt) {
        var el = document.getElementById('main'); 
        el.innerHTML = txt; //display output in DOM
    }   
</script>
</head>
<body onload="checkFileAPI();">
    <div id="container">    
        <input type="file" onchange='readText(this)' />
        <br/>
        <hr/>   
        <h3>Contents of the Text file:</h3>
        <div id="main">
            ...
        </div>
    </div>
</body>
</html>`

Please help me in this

役に立ちましたか？

解決

You could format the text file like a SSV (TSV or CSV as well), then instead of ReadAll() I'd do something like this:

var file = reader.OpenTextFile(filePath, 1),
    data = [], n;
while (!file.AtEndOfStream) {
    data.push(file.ReadLine().split(';')); // or use some other "cell-separator"
}

Then the rest is a lot simpler and faster, if you've an empty table element in your HTML:

<table id="table"></table>

Now just create rows and cells dynamically based on the data array:

var table = document.getElementById('table'),
    len = data.length,
    r, row, c, cell;
for (r = 0; r < len; r++) {
    row = table.insertRow(-1);
    for (c = 0; c < data[r].lenght; r++) {
        cell.row.insertCell(-1);
        cell.innerHTML = data[r][c];
    }
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top