如何使用Java脚本读取文本文件并以HTML格式以列格式显示。

时间:2013-11-19 13:56:52

标签: html jscript

这是使用Jscript读取文本文件并以HTML格式显示的代码。但我需要它在表格中显示它。

如何在表格中显示。 <这是我的第一个问题,所以我希望我能得到解决方案>

`                      读取文件(通过用户输入选择)                  var阅读器; //仅用于演示目的的GLOBAL File Reader对象

    /**
     * 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>`

请帮助我

1 个答案:

答案 0 :(得分:0)

您可以将文本文件格式化为SSV(TSV或CSV),然后代替ReadAll()我会这样做:

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

如果你的HTML中有一个空的table元素,那么其余部分会更加简单和快捷:

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

现在只需根据data数组动态创建行和单元格:

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];
    }
}