將文本文件顯示到html表中

Question

我有一個文本文件，我想解析它並將結果保留為HTML表在頁面中。

文本文件中的每一行都是制表符分隔的，具有不同功能的值。 我想解析每一行，然后按Tab鍵拆分並將每一行另存為Javascript對象。因此為每一行保存了一個對象，因此我將擁有一個對象數組。

然后，我想將該對象數組顯示到html頁的表中。 這里是我的嘗試，但它並沒有顯示任何東西！ 我沒有任何錯誤！ 在函數yolla()我正在讀取文本文件。我通過函數library_object()定義了對象。 然后，我閱讀了文本文件的每一行，並按Tab鍵將其分開，然后將其保存到一個對象中。 那么每一行將是var lib_info = new Array()一個對象。

實際上，我不知道如何將lib_info[]數組顯示到表中。

<div id="Summary">
    <p>In this page a summary of all available libraries in the HBase is shown! </p>
    <script type="text/javascript">
        var lib;
        var lib_info = new Array();

        if(navigator.appName.search('Microsoft')>-1) { 
            lib = new ActiveXObject('MSXML2.XMLHTTP'); 
        } else { 
            lib = new XMLHttpRequest(); 
        }

        function yolla() {
            lib.open('get', 'library.txt', true);
            lib.onreadystatechange= cevap;
            lib.send(null);
        }

        function cevap(){
            if(lib.readyState==4) {
                libArray = lib.responseText.split("\n");
                extract_libs(libArray);
            }
        }

        function extract_libs(libArray){
            var ORACLE_LIB_ID;
            var COMMON_NAME;
            var SCIENTIFIC_NAME;
            var GENETIC_BACKGROUND;
            var TISSUE;
            var DEV_STAGE;
            var TREATMENT;
            var ECTOPIC_ID;
            var ECTOPIC_TYPE;
            var EVENT_ID;
            var REPLICATE_NUMBER;
            var EXPERIMENT_DESC;
            var ADAPTOR_5;
            var ADAPTOR_3;
            var DATE_SENT;
            var DATE_RETURN;
            var LIB_NAME;
            var QC_NOTE;
            var SEQUENCER;
            for (i=0; i<libArray.length; i++){
                lib_tag = libArray[i].split("\t");
                for(j=0;j<lib_tag.length;j++){
                    switch(j){
                        case 0:
                            ORACLE_LIB_ID = lib_tag[0];
                        break;
                        case 1:
                            COMMON_NAME = lib_tag[1];
                        break;
                        case 2:
                            SCIENTIFIC_NAME = lib_tag[2];
                        break;
                        case 3:
                            GENETIC_BACKGROUND = lib_tag[3];
                        break;
                        case 4:
                            TISSUE = lib_tag[4];
                        break;
                        case 5:
                            DEV_STAGE = lib_tag[5];
                        break;
                        case 6:
                            TREATMENT = lib_tag[6];
                        break;
                        case 7:
                            ECTOPIC_ID = lib_tag[7];
                        break;
                        case 8:
                            ECTOPIC_TYPE = lib_tag[8];
                        break;
                        case 9:
                            EVENT_ID = lib_tag[9];
                        break;
                        case 10:
                            REPLICATE_NUMBER = lib_tag[10];
                        break;
                        case 11:
                            EXPERIMENT_DESC = lib_tag[11];
                        break;
                        case 12:
                            ADAPTOR_5 = lib_tag[12];
                        break;
                        case 13:
                            ADAPTOR_3 = lib_tag[13];
                        break;
                        case 14:
                            DATE_SENT = lib_tag[14];
                        break;
                        case 15:
                            DATE_RETURN = lib_tag[15];
                        break;
                        case 16:
                            LIB_NAME = lib_tag[16];
                        break;
                        case 17:
                            QC_NOTE = lib_tag[17];
                        break;
                        case 18:
                            SEQUENCER = lib_tag[18];
                        break;
                    }
                }

                lib_info[i] = new library_object(ORACLE_LIB_ID, COMMON_NAME, SCIENTIFIC_NAME, GENETIC_BACKGROUND, TISSUE, DEV_STAGE, TREATMENT, ECTOPIC_ID, ECTOPIC_TYPE, EVENT_ID, REPLICATE_NUMBER, EXPERIMENT_DESC, ADAPTOR_5, ADAPTOR_3, DATE_SENT, DATE_RETURN, LIB_NAME, QC_NOTE, SEQUENCER);
            }                           
        }
        function library_object(ORACLE_LIB_ID, COMMON_NAME, SCIENTIFIC_NAME, GENETIC_BACKGROUND, TISSUE, DEV_STAGE, TREATMENT, ECTOPIC_ID, ECTOPIC_TYPE, EVENT_ID, REPLICATE_NUMBER, EXPERIMENT_DESC, ADAPTOR_5, ADAPTOR_3, DATE_SENT, DATE_RETURN, LIB_NAME, QC_NOTE, SEQUENCER){
            this.libID = ORACLE_LIB_ID;
            this.ComName = COMMON_NAME;
            this.ScnName = SCIENTIFIC_NAME;
            this.background = GENETIC_BACKGROUND;
            this.tissue = TISSUE;
            this.devStage = DEV_STAGE;
            this.treatment = TREATMENT;
            this.ectopic = ECTOPIC_ID;
            this.ectType = ECTOPIC_TYPE;
            this.eventID = EVENT_ID;
            this.ReplicateNum = REPLICATE_NUMBER;
            this.ExpDesc = EXPERIMENT_DESC;
            this.adaptor5 = ADAPTOR_5;
            this.adaptor3 = ADAPTOR_3;
            this.dateSent = DATE_SENT;
            this.dateReturn = DATE_RETURN;
            this.libName = LIB_NAME;
            this.QcNote = QC_NOTE;
            this.sequencer = SEQUENCER;
        }                
    </script>
    <input type="button" value="show library" onclick="yolla()">
    <table>
        <tr>
            <th>Library ID</th>
            <th>Common Name</th>
            <th>Tissue</th>
            <th>BackGround</th>
        </tr>
        <script>
            for (i=0; i<lib_info.length; i++){
                document.write('<tr><td>' + lib_info[i].libID + '</td><td>'+ lib_info[i].ComName + '</td><td>' + lib_info[i].tissue + '</td><td>' + lib_info[i].background + '</td></tr>');
            }
        </script>
    </table>
    <div id="library"></div>
</div>

誰能告訴我缺少了什么？

Answer 1

XMLHttpRequest是異步的，因此當您嘗試循環時，數組的長度可能為0。

您可以嘗試在文本變量中編寫HTML片段，然后將其插入div元素

function cevap() {
    if(lib.readyState==4) {
        libArray = lib.responseText.split("\n");
        extract_libs(libArray);
        createTable() // <--------
    }
}

function createTable() {
    var table = '<table><tr><th>Library ID</th><th>Common Name</th>' +
                '<th>Tissue</th><th>BackGround</th></tr>';

    for (i=0; i<lib_info.length; i++){
        table += '<tr><td>' + lib_info[i].libID + '</td><td>' +
           lib_info[i].ComName + '</td><td>' + lib_info[i].tissue + '</td><td>' + 
           lib_info[i].background + '</td></tr>';
    }
    table += '</table>';
    document.getElementById('myCoolElement').innerHTML = table;
}