Hallo ersteinmal,
ich hänge Momentan an folgendem Problem, ich habe eine Tabelle erstellt, welche sich mit spalten füllen lässt.
Wenn ich nun anfanszeilen per HTML mit in die Tabelle übergebe, können diese auch normal sortiert werden.
Wenn ich jedoch durch druck auf einen neuen Button eine Spalte in die tabelle hinzufüge, kann dieses nicht mit sortiert werden.
Bin noch relativ neu in Javascript und HTML, und denke, dass ich beim erzeugen der neuen Spalte in der Tabelle irgendwo einen Fehler hab, sodass diese nicht richtig in der Tabelle verankert ist.
Sortierverfahren von :
http://www.frequency-decoder.com/demo/table-sort-revisited/
Tabelle:
Funktion zum einfügen in die Tabelle
ich hänge Momentan an folgendem Problem, ich habe eine Tabelle erstellt, welche sich mit spalten füllen lässt.
Wenn ich nun anfanszeilen per HTML mit in die Tabelle übergebe, können diese auch normal sortiert werden.
Wenn ich jedoch durch druck auf einen neuen Button eine Spalte in die tabelle hinzufüge, kann dieses nicht mit sortiert werden.
Bin noch relativ neu in Javascript und HTML, und denke, dass ich beim erzeugen der neuen Spalte in der Tabelle irgendwo einen Fehler hab, sodass diese nicht richtig in der Tabelle verankert ist.
Sortierverfahren von :
http://www.frequency-decoder.com/demo/table-sort-revisited/
Tabelle:
Code:
<div align="center" style="height:500px; overflow:scroll; width:80%; background:#e5e5e5" >
<table align="center" id="data_table" class ="onload-zebra">
<thead>
<tr>
<th scope="col" width="25%" class ="sortable">URL</th>
<th scope="col" width="25%" class ="sortable">Size</th>
<th scope="col" width="25%" class ="sortable">Progress</th>
<th scope="col" width="25%" class ="sortable">Status</th>
</tr>
</thead>
<%
for(int i=0;i<90;++i) {
%>
<tr>
<td>test</td>
<td><%=i%></td>
<td>Upload</td>
<td>Downloading</td>
</tr>
<%
}
%>
</table>
</div>Funktion zum einfügen in die Tabelle
Code:
function addRow(url, size, status) {
var table = document.getElementById("data_table");
var body = table.getElementsByTagName("tbody")[0];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(url));
td1.setAttribute("width","25%");
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(x));
td2.setAttribute("width","25%");
var td3 = document.createElement("td");
var progress = document.createElement("progress");
var span = document.createElement("span");
span.setAttribute("id","test")
progress.appendChild(span);
progress.setAttribute("value",0);
progress.setAttribute("max",100);
progress.setAttribute("id","span")
td3.appendChild(progress);
td3.setAttribute("width","25%");
var td4 = document.createElement("td");
td4.appendChild(document.createTextNode(status));
td4.setAttribute("width","25%");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.setAttribute("id", size);
body.appendChild(tr);
++x;
}
Das x ist in dem Fall nur eine Globale Variable, welche für jede eingefügte Reihe hochzählt, damit es überhaupt etwas zu soriteren gibt, da der Rest der Felder noch Statisch sind.