Anja: Tabelle Sortieren

Beitrag lesen

SELF-Forum

Tabelle Sortieren

Anja
– Informationen zu den Bewertungsregeln

Hallo Leute,
Ich möchte gern eine html tabelle dynamisch sortieren und habe auch ein script dazu gefunden. Einziger Nachteil: die Tabelle enthält Links und die werden nicht richtig sortiert. weiß jemand wie ich das script dazu bringe die links zu ignorieren? Tschuldigung für den vielen code, als javascript-neuling konnte leider die relevante Stelle nicht ausmachen
Danke für Tipps,
Anja

// JavaScript Document
var default_order = "asc"; // "asc" || "desc"
var asc_img_uri = "asc.gif";
var desc_img_uri = "desc.gif";
var asc_img_alt_text =
    "aufsteigend sortiert: ändern in absteigend sortiert";
var desc_img_alt_text =
    "absteigend sortiert: ändern in aufsteigend sortiert";

var tables = new Array();
var ti = 0;

function sort_table(id) {
   this.id = id;
   this.obj;
   this.tbody_obj;
   this.sort_cols = 0;
   this.sort_rows = 0;
   this.img_ids = new Array();
   this.tr_ids = new Array();
   this.td_ids = new Array();
   this.active_sort_col;
   this.active_sort_order = default_order;
}

function init_tabsort(table_id) {
   if(!document.getElementById) return;
   tables[ti] = new sort_table(table_id);
   var t = ti;
   ti += 1;
   tables[t].obj = document.getElementById(table_id);
   for(var i = 0; i < tables[t].obj.childNodes.length; i++) {
    switch(tables[t].obj.childNodes[i].nodeName.toLowerCase()) {
         case 'colgroup':
            for(j = 0;
            j < tables[t].obj.childNodes[i].childNodes.length;
            j++)
if(tables[t].obj.childNodes[i].childNodes[j].nodeName.
toLowerCase() == 'col')
               tables[t].sort_cols += 1;
            break;
         case 'tbody':
            tables[t].tbody_obj = tables[t].obj.childNodes[i];
            break;
         default: break;
      }
   }
   var tri = 0;
   var tdi = 0;
   for(i = 0; i < tables[t].tbody_obj.childNodes.length; i++) {
if(tables[t].tbody_obj.childNodes[i].nodeName.toLowerCase()
      == 'tr') {
         tables[t].tbody_obj.childNodes[i].id = 'tr_' + tri;
         tables[t].tr_ids.push('tr_' + tri);
         tables[t].sort_rows += 1;
         tdi = 0;
         for(j = 0;
         j < tables[t].tbody_obj.childNodes[i].childNodes.length; j++) {
if(tables[t].tbody_obj.childNodes[i].childNodes[j].nodeName.toLowerCase() == 'td') {
   tables[t].tbody_obj.childNodes[i].childNodes[j].id
   = 'tr_' + tri + '_td_' + tdi;
   tables[t].td_ids.push('tr_' + tri + '_td_' + tdi);
               tdi += 1;
            }
         }
         tri += 1;
      }
   }
}

function get_sort_table_obj_by_id(id) {
   for(var i = 0; i < tables.length; i++)
      if(tables[i].id == id)
         return(tables[i]);
}

function numsort(a,b) {
   return parseFloat(a) - parseFloat(b);
}
function stringComparison(a, b) {
 a = a.toLowerCase();

a = a.replace(/ä/g,"a");
 a = a.replace(/ö/g,"o");
 a = a.replace(/ü/g,"u");
 a = a.replace(/ß/g,"s");

b = b.toLowerCase();

b = b.replace(/ä/g,"a");
 b = b.replace(/ö/g,"o");
 b = b.replace(/ü/g,"u");
 b = b.replace(/ß/g,"s");

return(a==b)?0:(a>b)?1:-1;
}

function tabsort(table_id, sort_type, col_n) {
   if(!document.getElementById) return;
   var delimiter = "|||||";
   var to = get_sort_table_obj_by_id(table_id);
   var sort_array = new Array();
   for(var i = 0; i < to.sort_rows; i++) {
      tr_array = new Array();
      tr_id = 'tr_' + i;
      td_id = tr_id + '_td_' + col_n;
      tr_array.push(document.getElementById(td_id).innerHTML);
      for(var j = 0; j < to.sort_cols; j++) {
          if(j == col_n) continue;
          else {
             tr_id = 'tr_' + i;
             td_id = tr_id + '_td_' + j;
             tr_array.push
             (document.getElementById(td_id).innerHTML);
          }
      }
      tr_str = tr_array.join(delimiter);
      sort_array.push(tr_str);
   }
   if(sort_type == 'an')
      sort_array.sort(stringComparison);
   else if(sort_type == 'n')
      sort_array.sort(numsort);
   if(to.active_sort_order == 'desc') {
      sort_array.reverse();
      to.active_sort_order = 'asc';
   }
   else
      to.active_sort_order = 'desc';
   for(i = 0; i < sort_array.length; i++) {
      tr_array = sort_array[i].split(delimiter);
      first = tr_array.shift();
      tr_array.splice(col_n, 0, first);
      for(j = 0; j < to.sort_cols; j++) {
         tr_id = 'tr_' + i;
         td_id = tr_id + '_td_' + j;
         document.getElementById(td_id).innerHTML = tr_array[j];
      }
   }
   var img_html;
   if(to.active_sort_order == 'asc')
      img_html = '<img src="' + desc_img_uri + '" alt="' +
      desc_img_alt_text + '">';
   else
      img_html = '<img src="' + asc_img_uri + '" alt="' +
      asc_img_alt_text + '">';
   for(i = 0; i < to.sort_cols; i++) {
      if(i == col_n)
document.getElementById(table_id + '_sort_img_' + i).innerHTML =
img_html + " ";
      else
         document.getElementById(table_id + '_sort_img_' + i).innerHTML = "";
   }
}

html:

<body onload="init_tabsort('objekttabelle')">

<form action="javascript:void(0)">
<table id="objekttabelle" border="1">
<colgroup>
<col style="width:15%">
<col style="width:10%">
<col style="width:15%">
<col style="width:15%">
<col style="width:15%">
<col style="width:15%">
<col style="width:15%">
</colgroup>
<thead>
<tr>
<th><button type="button"
onClick="tabsort('objekttabelle','an',0)">
<span id="objekttabelle_sort_img_0"></span>
Name</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',1)">
<span id="objekttabelle_sort_img_1"></span>
Baujahr</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',2)">
<span id="objekttabelle_sort_img_2"></span>
Entwerfer</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',3)">
<span id="objekttabelle_sort_img_3"></span>
Adresse</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',4)">
<span id="objekttabelle_sort_img_4"></span>
Stadtteil</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',5)">
<span id="objekttabelle_sort_img_5"></span>
Stil</button></th>
<th><button  type="button"
onClick="tabsort('objekttabelle','an',6)">
<span id="objekttabelle_sort_img_6"></span>
Typus</button></th>
</tr>
</thead>
<tbody>
<tr>
<TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried haupt-klein.html'">Waggonfabrik
    Falkenried</a></TD>
<TD>2005-2006</TD>
<TD>St&#228;dtebauentwurf: Bolles+Wilson</TD>
<TD><a href="http://www.stadtansichten-hamburg.de/karte2.html?marker=12" target="_blank" onClick="oeffnefenster(this.href); return false">Falkenried</a><BR></TD>
<TD>Hoheluft-0st</TD>
<TD>Architektur der Gegenwart</TD>
<TD>St&#228;dtebauliches Ensemble</TD>
</tr>
<tr>
<TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried bauteil a-klein.html'">Waggonfabrik
    Falkenried Bauteil A</a></TD>
<TD>2005-2006</TD>
<TD>Baumschlager Eberle</TD>
<TD><a href="http://www.stadtansichten-hamburg.de/karte2.html?marker=12" target="_blank" onClick="oeffnefenster(this.href); return false">Lehmweg 16</a></TD>
<TD>Hoheluft-0st</TD>
<TD>Architektur der Gegenwart</TD>
<TD>Wohngeb&#228;ude</TD>
</tr>
<TR>
<TD><a href="01-Falkenried haupt-fotos.htm" target="inhalt" onMouseOver="parent.objekte.location.href='01-falkenried apartments-klein.html'">Waggonfabrik
    Falkenried, Falkenried Apartments</a></TD>
<TD>2005-2006</TD>
<TD>Bothe Richter Teherani</TD>
<TD><a href="http://www.stadtansichten-hamburg.de/karte2.html?marker=12" target="_blank" onClick="oeffnefenster(this.href); return false">Falkenried 23-29</a></TD>
<TD >Hoheluft-0st</TD>
<TD >Architektur der Gegenwart</TD>
<TD >Wohngeb&#228;ude</TD>
</TR>
</tbody>
</table>
</form>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln