Dynamischer Tabelle ID's vergeben

S

superNova1014

Grünschnabel
Hallo Leute,

ich hab ein Problem, an dem ich schon seit 14 Uhr hocke :mad:

Und zwar möchte ich eine CSV Datei importieren und dynamisch als HTML Tabelle erstellen.
Soweit so gut, funktioniert auch....

Jedoch möchte ich jeder Zeile (tr) und jeder Spalte (td) eine ID zuweisen, damit ich diese später an Google Chart weitergeben kann.
Z. b. möchte ich den Wert der in Zeile 3 und Spalte 4 steht mit einer ID belegen, damit ich mir diesen dann ziehen kann.

BITTE HELFT MIR WEITER, ICH VERZWEIFEL NOCH******
An den auskommentierten Zeilen könnt ihr sehen was ich schon versucht habe.

Javascript: 
<body>
        <div id="wrap">
            <h1>Testdatei f&uuml;r den Input </h1>
            <form action="javascript:void(0);" id="the_form">
                <input type="file" id="the_file" required="required" accept=".csv"/>
                <input type="submit" value="Daten laden" class="btn" onclick="handleFileSelect(); decide(); return false"/>
            </form>
            
            <div id="file_info"></div>
            <div id="list"></div>
        
        <div><input type="submit" id="dia" value="Diagramm laden" style="visibility: hidden" onClick="drawChart()"/> </div>
        <p> </p>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
        
        
        <script type="text/javascript">
            
            function fileInfo(e){
                var file = e.target.files[0];
                if (file.name.split(".")[1].toUpperCase() != "CSV"){
                    alert('Invalid csv file !');
                    e.target.parentNode.reset();
                    return;
                }else{
                document.getElementById('file_info').innerHTML = "<p>File Name: "+file.name + " | "+file.size+" Bytes.</p>";                }
            }
        function handleFileSelect(){
            var file = document.getElementById("the_file").files[0];
            var reader = new FileReader();
            var link_reg = /(http:\/\/|https:\/\/)/i;
            reader.onload = function(file) {
                var content = file.target.result;
                var rows = file.target.result.split(/[\r\n|\n]+/);
                var table = document.createElement('table');
                
                for (var i = 0; i < rows.length; i++){
                    var tr = document.createElement('tr');
                    
                    table.appendChild(row).setAttribute("id", trid_neu, 0);
                    
                    var arr = rows[i].split(';');
                    for (var j = 0; j < arr.length; j++){
                        if (i==0)
                        var td = document.createElement('th');
                        else
                        var td = document.createElement('td');
                        
                        if( link_reg.test(arr[j]) ){
                            var a = document.createElement('a');
                            a.href = arr[j];
                            a.target = "_blank";
                            a.innerHTML = arr[j];
                            td.appendChild(a);
                        }else{
                            td.innerHTML = arr[j];
                        }
                        tr.appendChild(td);
              /*          tr.setAttribute("ID", 'eins');   */
                    }
                    
                    table.appendChild(tr);
              /*      table.setAttribute("ID", 'eins');   */
                }
                
               /* table.setAttribute("ID", 'eins');
                table.setAttribute("class", 'einmaleins'); */
           
                document.getElementById('list').appendChild(table);
                
            };
            reader.readAsText(file);
        }
        document.getElementById('the_form').addEventListener('submit', handleFileSelect, false);
        document.getElementById('the_file').addEventListener('change', fileInfo, false);
 
Zuletzt bearbeitet von einem Moderator:
Beim oberflächlichen Drüberschauen ist mir in dieser Zeile hier

table.appendChild(row).setAttribute("id", trid_neu, 0);

nicht klar, wo genau die Variable "row" gesetzt wird.

Außerdem stellt sich Javascript manchmal sehr wegen Groß-/Kleinschreibung an, weshalb ich hier

table.setAttribute("ID", 'eins');

"ID" in Kleinbuchstaben schreiben würde. Ist aber nur ne Vermutung.
 
oh ja, die zeile habe ich vergessen auszublenden..
das problem ist das er ja die for schleife durchläuft und dann so viele Zeilen einfügt wie eben in der CSV Datei sind. somit kann ich nicht spezielle Zeilen anlegen und genau dieser die ID verpassen...

was schlägst du vor?
 
die tr und die td die automatisch erstellt werden (je nach dem wie groß meine cdv Datei ist) sollen id's bekommen, damit ich jede Zeile und spalte dementsprechend ansprechen kann
 
Du hast doch den Zähler i für die Zeilen und j für die Spalten. Wo läge denn das Problem, daraus eine eindeutige ID von mir aus im Stil z11s22 für Zeile 11 Spalte 22 zusammenzubauen?

Wenn dir das nicht hilft, solltest du evtl. mal deinen Code lauffähig überarbeiten und dann noch einmal posten und genau beschreiben, wo es hängt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück