Načtení htm tabulky do scriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Načtení htm tabulky do scriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.comNačtení htm tabulky do scriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Spuštěný nový filmový web Filmožrouti.cz — vše o Avengers, Pacific Rim, Thor, Star Wars…
Vojta
~ Anonymní uživatel
73 příspěvků
9. 11. 2017   #1
-
0
-

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:

var i = 0;                                                                  //  nastaví counter na 0 (index pole)
                                                                           //
function Files () {                                                       //
var files = document.getElementById("table-input").files;                //  načte soubory z inputu
var table = document.getElementById('tables');                          //  načte prázdný <object>
   setTimeout(function () {                                            //  vytvoří funkci pro loop
    table.setAttribute('data', "tabulky/" + files[i].name);           //  změní atribut data pro <object>
      i++;                                                           //  zvýší hodnotu counteru o 1
      if (i >= files.length) {                                      //  nastaví hodnotu counteru znovu na 0 pokud dojde v poli na konec
        i = 0;                                                     //
      }                                                           //  
      if (i < files.length) {                                    //  vykoná kód pokud je index v poli souborů  ..
        Files();                                                //  ..  zavolá funkci Files() která spustí další iteraci loopu
      }                                                        //
   }, 2000)                                                   //  pauza
}              

Nahlásit jako SPAM
IP: 89.190.80.–
peter
~ Anonymní uživatel
2983 příspěvků
9. 11. 2017   #2
-
0
-

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
2983 příspěvků
9. 11. 2017   #3
-
0
-

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
-
0
-

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
2983 příspěvků
10. 11. 2017   #5
-
0
-

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
Newbie
10. 11. 2017   #6
-
0
-

#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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
Vojta
~ Anonymní uživatel
73 příspěvků
10. 11. 2017   #7
-
0
-

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
2983 příspěvků
10. 11. 2017   #8
-
0
-

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
Newbie
12. 11. 2017   #9
-
0
-

#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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
Vojta
~ Anonymní uživatel
73 příspěvků
13. 11. 2017   #10
-
0
-

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
Newbie
13. 11. 2017   #11
-
0
-

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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
Vojta
~ Anonymní uživatel
73 příspěvků
13. 11. 2017   #12
-
0
-

var i = 0;                                                                  //  nastaví counter na 0 (index pole)
                                                                           //
function Files () {                                                       //
var files = document.getElementById("table-input").files;                //  načte soubory z inputu
var table = document.getElementById('tables');                          //  načte prázdný <object>
   setTimeout(function () {                                            //  vytvoří funkci pro loop
    table.setAttribute('data', "tabulky/" + files[i].name);           //  změní atribut data pro <object>
      i++;                                                           //  zvýší hodnotu counteru o 1
      if (i >= files.length) {                                      //  nastaví hodnotu counteru znovu na 0 pokud dojde v poli na konec
        i = 0;                                                     //
      }                                                           //  
      if (i < files.length) {                                    //  vykoná kód pokud je index v poli souborů  ..
        Files();                                                //  ..  zavolá funkci Files() která spustí další iteraci loopu
      }                                                        //
   }, 2000)                                                   //  pauza
}              

Nahlásit jako SPAM
IP: 89.190.80.–
weroro0
Newbie
13. 11. 2017   #13
-
0
-

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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
Vojta
~ Anonymní uživatel
73 příspěvků
13. 11. 2017   #14
-
0
-

#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
2983 příspěvků
13. 11. 2017   #15
-
0
-

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
-
0
-

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
Newbie
13. 11. 2017   #17
-
0
-

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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
Vojta
~ Anonymní uživatel
73 příspěvků
14. 11. 2017   #18
-
0
-

#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
2983 příspěvků
14. 11. 2017   #19
-
0
-

#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
Newbie
14. 11. 2017   #20
-
0
-

#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.–
Front-end web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
peter
~ Anonymní uživatel
2983 příspěvků
14. 11. 2017   #21
-
0
-

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...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 15 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý