Načtení htm tabulky do scriptu

Fórum › JavaScript, AJAX, jQuery

Vlákno bylo úspěšně vloženo.

Pokud sám přijdeš na řešení, nezapomeň ho sem přidat!

Vojta

~ Anonymní uživatel
~ 73 příspěvků

9. 11. 2017 #1

Zdravím,

potřeboval bych pomoct s tímhle jednoduchým webem, není to moje práce (zdědil jsem od třetí strany :D), web má načíst htm tabulku nebo i klidně v jiném formátu ale bez metody co je teď momentálně input a pak podle scriptu načítat další tabulky ve složce(web má běžet na smart tv v prohlížeči a ty tabluky se mají načítat automaticky ze složky a input televize nepodporuje). Myslím si že pro někoho kdo s javascriptem pracuje to nebude tak těžké jak mi to připadá. Díky za pomoc.

HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" lang="cs">
<link rel="stylesheet" type="text/css" rel="nofollow" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="table_changer.js"></script>
</head>
<body>
<header>
<img src="" id="logo">
<p id="headline"></p>
</header>
<section>
<input type="file" multiple="multiple" id="table-input" onchange="Files()">
<object type="text/html" width="100%" height="100%" id="tables"></object>
</section>
<footer>
<p><b>&copy <script>document.write(new Date().getFullYear())</script></b></p>
</footer>
</body>
</html>

Javascript:

Nahlásit jako SPAM

IP: 89.190.80.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

9. 11. 2017 #2

google = example javascript multiple files filereader

function setupReader(file) {
    var name = file.name;
    var reader = new FileReader();  
    reader.onload = function(e) {  
        // get file content  
        var text = e.target.result; 
        var li = document.createElement("li");
        li.innerHTML = name + "____" + text;
        ul.appendChild(li);
    }
    reader.readAsText(file, "UTF-8");
}

var ul = document.querySelector("#bag>ul");for (var i = 0; i < files.length; i++) {
    setupReader(files[i]);
}
// v html pak <div id=bag><ul></ul></div>
// Do toho ul prida odrazky li a nacte soubory.
// Muze se stat, ze nebudou presne v poradi.

Nahlásit jako SPAM

IP: 2001:718:2601:258:a1a7:84...–

peter

~ Anonymní uživatel
~ 3981 příspěvků

9. 11. 2017 #3

Tady maji zas jiny kod, ktery okamzite obrazek nacita a zobrazuje
https://jsfiddle.net/…mpson/jPTV3/

<input type="file" id="collection" multiple /><br/>
<script>
if ( window.FileReader ) {
    document.getElementById("collection").onchange = function(){
        var counter = -1, file;
        while ( file = this.files[ ++counter ] ) {
            var reader = new FileReader();
            reader.onloadend = (function(file){
                return function(){
                    var image = new Image();
                    image.height = 100;
                    image.title = file.name;
                    image.src = /^image/.test(file.type) 
                        ? this.result 
                        : "http://i.stack.imgur.com/t9QlH.png";
                    document.body.appendChild( image );        
                }          
            })(file);   
            reader.readAsDataURL( file );
        } 
    } 
}
</script>

Nahlásit jako SPAM

IP: 2001:718:2601:258:a1a7:84...–

Vojta

~ Anonymní uživatel
~ 73 příspěvků

10. 11. 2017 #4

Ok díky za pomoc, akorát nevím jak v tom prvním případě navést cestu aby si to ty tabulky načítalo např. ze složky tabulky, myšlenka je taková že by se vždycky měla načíst tabulka chvíli cca 30 - 60s zobrazovala a pak by se zobrazila další.

Nahlásit jako SPAM

IP: 89.190.80.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

10. 11. 2017 #5

No, ja nevim, zda uplne chapes, o co bezi.

fileReader pracuje se soubory, ktere mu da uzivatel do input type=file.
Pak je tu druha moznost, httpRequest, ten pracuje se soubory, ktere mas na serveru a posilas je uzivateli.

V obou pripadech je urcity cas, ~0 az 10 s, pri delsim to vetsinou napise error, kdy se soubory stahuji. Dokud neni kompletni, tak se nedaji zobrazit (pokud neupravis kod, aby je zobrazoval).
Chci rici, ze nemuzes treba po 30s zobrazit soubor, ktery stale jeste nedokoncil stahovani.. Takze bys to musel upravit tak, aby stahovane soubory byli zvlast a uz dostahovane zvlast.
A to zobrazeni pak muzes udelat pres setInterval nebo setTimeout (funkce, co mas v tom prvnim kodu)

setInterval('zobrazNext',30000); // spust funkci zobrazNext kazdych 30000 ms

Nahlásit jako SPAM

IP: 2001:718:2601:258:4cbc:8e...–

weroro0

Návštěvník

10. 11. 2017 #6

#4 Vojta
Tie tabuľky, sú uložené ako súbory v zložke tvojej aplikácie a chceš ich v nejakom intervale načítať a zobraziť? Pod pojmom tabuľka máš na mysli, čo konkrétne? HTML tabuľku (<table>) alebo Excell?

Nahlásit jako SPAM

IP: 91.235.54.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

Vojta

~ Anonymní uživatel
~ 73 příspěvků

10. 11. 2017 #7

Přesně jak se ptáš v dotazu by to mělo fungovat. Je to vyexportovaná tabulka z excelu.

Díky za pomoc ;)

Nahlásit jako SPAM

IP: 89.190.80.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

10. 11. 2017 #8

Aha. Takze si dej do google http request example. A import excel csv to html table javascript. (predpokladam, ze z excelu exportujes csv a ne xls)

Tohle je takovy osizeny kod z jedne stranky. CSV ma jinou strukturu a navic, excel tam dava stredniky a ne carky. Ale mozna ti to bude stacit.

function makeTable ( csv ) {

    var rows = csv.split('\n'),
    table = document.createElement('table'),
    tr = null, td = null,
    tds = null;

    for ( var i = 0; i < rows.length; i++ ) {
        tr = document.createElement('tr');
        tds = rows[i].split(',');
        for ( var j = 0; j < tds.length; j++ ) {
           td = document.createElement('td');
           td.innerHTML = tds[j];
           tr.appendChild(td);
        }
        table.appendChild(tr);
    }

    document.appendChild(table);

}

Jestli bys to chtel testnout

var csv = "\
aa,bb,cc,dd\n\
aa,bb,cc,dd\n\
aa,bb,cc,dd\n\
aa,bb,cc,dd\n\
";
makeTable(csv);

Nahlásit jako SPAM

IP: 2001:718:2601:258:4cbc:8e...–

weroro0

Návštěvník

12. 11. 2017 #9

#7 Vojta

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title>tabulky</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <img src="" id="logo">
            <p id="headline"></p>
        </header>
        <section>
            <object type="text/html" width="100%" height="100%" id="tables"></object>
        </section>
        <footer>
            <p>
                <b>
                    &copy;&nbsp;
                    <script>document.write(new Date().getFullYear().toString())</script>
                </b>
            </p>
        </footer>
        <script>
            (function () {
                'use strict';
        
                /**
                 * @param {Array} urlList
                 * @constructor
                 */
                var TableChanger = function (urlList) {
        
                    if (typeof urlList === 'undefined' || urlList.length < 1) {
                        return;
                    }
        
                    /** @type {Element} */
                    var tableScreen = document.querySelector('#tables');
        
                    /** @type {number} */
                    var interval = 30;
        
                    /** @type {number} */
                    var listShift = 0;
        
                    /**
                     * @returns void
                     */
                    var exec = function () {
                        if (!!tableScreen === false) {
                            return;
                        }
                        tableScreen.setAttribute('data', urlList[listShift]);
                        listShift++;
                        if (listShift > urlList.length) {
                            listShift = 0;
                        }
                        setTimeout(exec, interval * 1000);
                    };
        
                    /**
                     * @param {number} [changeInterval]
                     * @returns void
                     */
                    this.init = function (changeInterval) {
                        if (typeof changeInterval === 'number' && changeInterval > 1) {
                            interval = changeInterval;
                        }
                        exec();
                    };
        
        
                };
        
        
                (new TableChanger([
                    'http://localhost/tabulky/subor_a.xls',
                    'http://localhost/tabulky/subor_b.xls',
                    'http://localhost/tabulky/subor_c.xls'
                ])).init(30);
        
        
            })();
        </script>
    </body>
</html>

Nahlásit jako SPAM

IP: 89.173.156.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

Vojta

~ Anonymní uživatel
~ 73 příspěvků

13. 11. 2017 #10

weroro - díky moc máš můj obdiv, šlape to ale jen když tu tabulku tam dám s příponou .htm i ta změna po intervalu, když ji tam dám s xls. nebo xlsx tak se ta tabulka sama stáhne. Šlo by to udělat aby se tam zbrazovali tabulky přímo z excelu (xls, xlsx) jde mi o to že ty data bude poskytovat laik kterej umí jenom s office :D a taky jestli by bylo možný to udělat aby se ty tabulky měnily ve smyčce když to dojede až na poslední tabulku tak zase od znova. Díky moc.

Nahlásit jako SPAM

IP: 89.190.80.–

weroro0

Návštěvník

13. 11. 2017 #11

Teoreticky je možné vyskúšať zmeniť v značke <object> atribút type na
hodnotu "application/x-oleobject".

Ak to nebude fungovať, tak by som skúsil nahradiť <object> za <iframe>, ktorému by som menil src.

Čo si mal pred tým v súbore table_changer.js?

Nahlásit jako SPAM

IP: 91.235.54.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

Vojta

~ Anonymní uživatel
~ 73 příspěvků

13. 11. 2017 #12

Nahlásit jako SPAM

IP: 89.190.80.–

weroro0

Návštěvník

13. 11. 2017 #13

Aha, takže to bol obsah toho JS. Takže nič.
Vyskúšal si zmeniť ten type?

Nahlásit jako SPAM

IP: 91.235.54.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

Vojta

~ Anonymní uživatel
~ 73 příspěvků

13. 11. 2017 #14

#13 weroro
jj ale chrome mi hodí že to je nepodporované rozšíření a na smart tv to taky nepůjde, no když to nepůjde tam budu muset holt vždycky tu excel. tabulku uložit do htm

Nahlásit jako SPAM

IP: 89.190.80.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

13. 11. 2017 #15

No, pouzij to CSV a mozna ten makeTable(). Nebo si ten makeTable uprav, aby vygeneroval html text misto html stromu.

Nahlásit jako SPAM

IP: 2001:718:2601:258:1863:6e...–

Vojta

~ Anonymní uživatel
~ 73 příspěvků

13. 11. 2017 #16

To řešení od weroro mi vyhovuje jen je škoda že to nejde přímo z xls souboru. Použiju to od něj akorát bych tam potřeboval zakomponovat smyčku.

Nahlásit jako SPAM

IP: 89.190.80.–

weroro0

Návštěvník

13. 11. 2017 #17

Akú smyčku? chceš aby sa to loadovalo dookola? Však to robí.

Len som mal chybu v podmienke. Uprav to takto:

if (listShift >= urlList.length) {
    listShift = 0;
}

Nahlásit jako SPAM

IP: 91.235.54.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

Vojta

~ Anonymní uživatel
~ 73 příspěvků

14. 11. 2017 #18

#17 weroro
Paráda !!! Díky moc funguje to přesně jak jsem chtěl i ten loop. Nakonec jsem to vyřešil tím že si tu tabulku z excelu dám publikovat jako html stránku a funguje to. Ještě jednou weroro díky moc !

Nahlásit jako SPAM

IP: 89.190.80.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

14. 11. 2017 #19

#16 Vojta - No, vsak ano. Excel umi ukladat a precist csv format. Ten kousek kodu z toho umi vyrobit tabulku v html pri trose uprav. Ale je trochu osizeny. Protoze CSV soubor ma tyto pravidla:
- oddelovac sloupcu je carka , (excel pouziva strednik ;)
- oddelovat radku je enter \n
- slash znak je "
- text pole s uvozovkou " je treba ohranicit "text" a " je treba duplikovat "text""text"
- text pole s carkou , je treba ohranicit "text"
- text se zalomenim radku enter \n je treba ohranicit "text"
Cili v csv vypada ta tabulka je txt soubor (a pod tim je zapis pro js, kdybys potreboval, na konci radku vzdy \)

aa,bb,cc,dd
aa,bb,cc,dd
aa,bb,cc,dd
aa,bb,cc,dd

var str = "\
aa,bb,cc,dd\n\
aa,bb,cc,dd\n\
aa,bb,cc,dd\n\
aa,bb,cc,dd\n\
";

rows = str.explode("\n"); // ['aa,bb,cc,dd', 'aa,bb,cc,dd', 'aa,bb,cc,dd', 'aa,bb,cc,dd']
row = rows[0].explode(","); // ['aa', 'bb', 'cc', 'dd']
alert(row[2]) // cc

Ale, jak uz jsem psal, je to osizene, pouze za predpokladu, ze tam nemas dvojite uvozovky. Jinak by to pomoci explode zapsat neslo.

Nahlásit jako SPAM

IP: 2001:718:2601:258:4d71:f4...–

weroro0

Návštěvník

14. 11. 2017 #20

#19 peter
Píšeš zmätočne a miešaš hrušky s jablkami, a to nezainteresovaného veľmi zmätie.

V JS neexistuje explode(), nehovoriac o tom, že rôzne systémy používajú iné newline separátory.
Dokonca aj CSV môže mať rôznu štruktúru, prípadne kódovanie, ktoré vie parsovanie zkomplikovať.

Nahlásit jako SPAM

IP: 91.235.54.–

Javascript (ES5, ES6+) / Typescript Developer, Vanilla Front-end ninja, HTML, CSS specialist

Hlúpa otázka vzniká ako reakcia na nedostatok relevantných informácií.

peter

~ Anonymní uživatel
~ 3981 příspěvků

14. 11. 2017 #21

Ok, js pouziva split(). Explode() je z php.
Kodovani csv je jednoznacne. Komplikace si zpusobuje jen ten, co pouziva osizeny kod, jako s tim splitem.

Nahlásit jako SPAM

IP: 2001:718:2601:258:4d71:f4...–

← Zpět na seznam vláken ← Zpět do Fóra