| Autor | Zpráva | ||
|---|---|---|---|
| perun Profil |
#1 · Zasláno: 11. 3. 2008, 13:04:53 · Upravil/a: perun
Mám vytvorenú tabuľku, v ktorej je potrebné ako reakciu na zaškrtnutie/odškrtnutie checkboxu povoliť alebo zakázať zobrazenie určitých stľpcov. Tabuľka má aj hlavičku (ale tvorenú td), ktoré majú nastavený colspan. Každá bunka, ktorá sa má skrývať a objavovať má svoje vlastné id. Stľpce sú na začiatku zobrazené.
Po odškrtnutí sa príslušným td pomocou javacriptu nastaví display = 'none' a zmiznú. Zmenší sa aj hodnota colspan. Všetko je v poriadku. Keď sa checkbox opäť zaškrtne, javascript nastaví bunkám display='table-cell' (resp. display='block' pre IE) a zväčší colspan. Testoval som s Opere, Firefoxe a IE6. Opera a IE6 zobrazí všetko v poriadku. Firefox nesprávne zobrazuje hlavičku - ako keby vloží 'prázdnu bunku' (neexistuje, iba opticky to vyzerá, že tam bunka je) a posunie zvyšné bunky doprava. Umiestnenie 'prázdnej bunky' závisí na poradí zmeny colspan. Firebug zobrazuje, že všetky elementy a javascriptové premenné majú správne hodnoty. Nejaká idea, ako dosiahnuť správneho správania po návrate pôvodných hodnôt colspan vo firefoxe, tazk, aby sa mi nevytvárala fantómová bunka? Pred vypnutím stľpcov: 
Po vypnutí stľpcov: 
A po ich opätovnom zapnutí: 
//zobrazenie bunky
function showCell(_id) {
if (cells[_id] > 0) {
cells[_id]--;
}
if (cells[_id]==0) {
try {
this.document.getElementById(_id).style.display = 'table-cell'; //FF
}
catch (err) {
this.document.getElementById(_id).style.display = 'block'; //IE
}
}
}
//skrytie bunky
function hideCell(_id) {
cells[_id]++;
if (cells[_id]>0) {
//this.document.getElementById(_id).style.visibility = 'hidden';
this.document.getElementById(_id).style.display = 'none';
}
}
// táto funkcia sa volá ako reakcia na zmenu checkboxu. show obsahuje true alebo false
// headers je pole obsahujúce id hlavičiek, ktorym sa bude menit colspan (TM, O2, Vodafone, Spolu)
function showUnique(show) {
bShowUniq = show;
for (i=0; i<uniq.length; i++) {
if (show) {
showCell(uniq[i]);
}
else {
hideCell(uniq[i]);
}
}
if (show) {
for (i=0; i<headers.length; i++) {
this.document.getElementById('td_mt').colSpan*=2;
this.document.getElementById('td_mo').colSpan*=2;
//for (i=headers.length-1; i>=0; i--) {
this.document.getElementById(headers[i]).colSpan*=2;
}
}
else {
this.document.getElementById('td_mo').colSpan/=2;
this.document.getElementById('td_mt').colSpan/=2;
for (i=0; i<headers.length; i++) {
this.document.getElementById(headers[i]).colSpan/=2;
}
}
}
|
||
| peta Profil |
#2 · Zasláno: 11. 3. 2008, 15:31:48
- v prvni rade bych se vykaslal na zmenu display a menil className, cimz ti vypadne podminkovani IE / FF
- pokud tam uz nejakou className mas, tak bych pouzil funkci neco jako: function obj_class(obj,classN,add) { var reg,x; if (obj==null) {return false;} reg = new RegExp("(^"+classN+" )|(?: ("+classN+" ))|( "+classN+"$)|(^"+classN+"$)","g"); obj.className = obj.className.replace(reg,''); if (add) {obj.className = ((obj.className!="") ? obj.className+' ' : '' ) + classN;} return true; } - pokud se ti rozbiji ramecky a FF ukazuje spravny generated source kod (lze ziskat pres development toolbar plugin nebo oznacenim tabulky - prave tl - zobraz zdrojovy kod vyberu), pak jde mozna o chybu vykreslovani FF a melo by se to nahlasit. Avsak si myslim, ze spis nee. Nicmene je mozne jeste generovat celou tabulku znova pomoci JS, neco jako: http://peter-mlich.wz.cz/x/ww/js/jspriklady.htm - js-tab - kde snimam celou tabulku a pak ji pres JS dodam vlastnosti pripadne vygeneruji serazenou Z tveho odkazu na zdrojovy kod totiz vice vycist nelze. K obrazkum ti muzu rici, ze tam mas chybne vykreslene ramecky. Vic konstatovat nelze. Maximalne hadat proc asi. Nekde bych tu mel mit kristalovou kouli, treba mi ten kod da ona :) |
||
| los Profil * |
#3 · Zasláno: 11. 3. 2008, 19:51:12
Bez odkazu na stránku s ukážkou, kde to nefunguje, sa nedá dobre poradiť.
for (i=0; i<headers.length; i++) {
this.document.getElementById('td_mt').colSpan*=2;
this.document.getElementById('td_mo').colSpan*=2;
try {
this.document.getElementById(_id).style.display = 'table-cell'; //FF
}
catch (err) {
this.document.getElementById(_id).style.display = 'block'; //IE
}document.getElementById(_id).style.display = "" |
||
| perun Profil |
#4 · Zasláno: 12. 3. 2008, 11:18:18
Ďakujem za odpovede.
v prvni rade bych se vykaslal na zmenu display a menil className To nie je zlý nápad, ale v mojom konkrétnom prípade ťažšie použiteľný, pretože potrebujem odkrývať a zakrývať riadky a stľpce podľa rôznych kritérií. pokud se ti rozbiji ramecky a FF ukazuje spravny generated source kod (lze ziskat pres development toolbar plugin nebo oznacenim tabulky - prave tl - zobraz zdrojovy kod vyberu), pak jde mozna o chybu vykreslovani FF a melo by se to nahlasit. Práve o toto mi ide. Dev toolbar a firebug ukazujú správny xhtml kód, problém je naozaj len so zobrazením vo firefoxe. To znamená, že keď sú v tabuľke 4 hlavičky, tak sa to má 4-krát vynásobiť dvomi? Nie :) Zle som ten kód vystrihol. Ad kryštáľová guľa: zdrojový kód bol obrovský, tak som ho nepridával, ale vytvoril som malú stránku ako príklad, kde je použitý rovnaký spôsob a vo firefoxe taktiež nefunguje. Prikladám:
<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Štatistiky</title>
<style>
body, html {
font-family: arial;
font-size: 10px;
}
table {
border-collapse: collapse;
border: solid 1px black;
margin: 10px;
}
th {
padding: 2px 5px;
background-color: silver;
border: solid 1px black;
}
td {
padding: 2px 5px;
border: solid 1px black;
text-align: right;
}
td.even {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h2>Tabuľka používanosti:</h2>
<table>
<tr>
<td class='even'> </td>
<td class='even' colspan='2' id='td_1'>wrrrrr</td>
<td class='even' colspan='2' id='td_2'>chrrrr</td>
</tr>
<tr>
<td class='odd' id='td_3'>Riadok 1</td>
<td class='odd' id='td_4'>26</td>
<td class='odd' id='td_5' style='background-color: steelblue'>10 919</td>
<td class='odd' id='td_6'>0</td>
<td class='odd' id='td_7' style='background-color: steelblue'>10 945</td>
</tr>
<tr>
<td class='even' id='td_8'>Riadok 2</td>
<td class='even' id='td_9'>31 042</td>
<td class='even' id='td_10' style='background-color: steelblue'>451 413</td>
<td class='even' id='td_11'>102 547</td>
<td class='even' id='td_12' style='background-color: steelblue'>585 002</td>
</tr>
</table>
<script language='javascript' type='text/javascript'>
rows = new Array('td_3', 'td_4', 'td_5', 'td_6', 'td_7');
cols = new Array('td_4', 'td_6', 'td_9', 'td_11');
uniq = new Array('td_5', 'td_7', 'td_10', 'td_12');
headers = new Array('td_1', 'td_2');
cells = new Array()
bShowUniq = true;
cells['td_3'] = 0;
cells['td_4'] = 0;
cells['td_5'] = 0;
cells['td_6'] = 0;
cells['td_7'] = 0;
cells['td_8'] = 0;
cells['td_9'] = 0;
cells['td_10'] = 0;
cells['td_11'] = 0;
cells['td_12'] = 0;
function showCell(_id) {
if (cells[_id] > 0) {
cells[_id]--;
}
if (cells[_id]==0) {
//this.document.getElementById(_id).style.visibility = 'visible';
///*
try {
this.document.getElementById(_id).style.display = 'table-cell'; //FF
}
catch (err) {
this.document.getElementById(_id).style.display = 'block'; //IE
}
//*/
}
}
function hideCell(_id) {
cells[_id]++;
if (cells[_id]>0) {
//this.document.getElementById(_id).style.visibility = 'hidden';
this.document.getElementById(_id).style.display = 'none';
}
}
function showUnique(show) {
bShowUniq = show;
if (!show) {
for (i=0; i<headers.length; i++) {
this.document.getElementById(headers[i]).colSpan/=2;
}
}
for (i=0; i<uniq.length; i++) {
if (show) {
showCell(uniq[i]);
}
else {
hideCell(uniq[i]);
}
}
if (show) {
for (i=0; i<headers.length; i++) {
//for (i=headers.length-1; i>=0; i--) {
this.document.getElementById(headers[i]).colSpan*=2;
}
}
}
function showRowDetails(show) {
for (i=0; i<rows.length; i++) {
if (show) {
showCell(rows[i]);
for (j=0; j<dates.length; j++) {
//dates[i].rowSpan = 3;
}
}
else {
hideCell(rows[i]);
for (j=0; j<dates.length; j++) {
//dates[i].rowSpan = 1;
}
}
}
}
function showColDetails(show) {
mul = bShowUniq?2:1
if (show) {
this.document.getElementById('td_mo').colSpan = (4)*mul;
this.document.getElementById('td_mt').colSpan = (4)*mul;
}
else {
this.document.getElementById('td_mo').colSpan = mul;
this.document.getElementById('td_mt').colSpan = mul;
}
for (i=0; i<cols.length; i++) {
if (show) {
showCell(cols[i]);
}
else {
hideCell(cols[i]);
}
}
}
</script>
<form method='get' action='' onsubmit='return false;'>
Zobraziť <input type='checkbox' onclick='showUnique(this.checked)' checked /><br />
</form>
</body>
</html>
Ak by sa na to niekto pozrel a potvrdil/vyvrátil mi, že vo firefoxe je naozaj problém a prípadne by poznal riešenie, bol by som veľmi vďačný. |
||
| los Profil * |
#5 · Zasláno: 12. 3. 2008, 22:27:07
Mne to vo Firefoxe funguje. Skús si to zobraziť vo Firefoxe v safe móde, či to nespôsobuje nejaké rozšírenie.
Trochu by som to zjednodušil. Napr. takto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Štatistiky</title>
<style type="text/css">
body, html { font-family: arial; font-size: 10px; }
table { border-collapse: collapse; border: solid 1px black; margin: 10px; }
th { padding: 2px 5px; background-color: silver; border: solid 1px black; }
td { padding: 2px 5px; border: solid 1px black; text-align: right; }
tr.even td { background-color: #e0e0e0; }
table td.uniq { background-color: steelblue; }
table.hidden td.uniq { display: none; }
</style>
</head>
<body>
<h2>Tabuľka používanosti:</h2>
<table id="table">
<thead>
<tr class="even">
<td> </td>
<td colspan="2" class="dyn">wrrrrr</td>
<td colspan="2" class="dyn">chrrrr</td>
</tr>
</thead>
<tbody>
<tr>
<td>Riadok 1</td>
<td>26</td>
<td class="uniq">10 919</td>
<td>0</td>
<td class="uniq">10 945</td>
</tr>
<tr class="even">
<td>Riadok 2</td>
<td>31 042</td>
<td class="uniq">451 413</td>
<td>102 547</td>
<td class="uniq">585 002</td>
</tr>
</tbody>
</table>
<script type="text/javascript">//<![CDATA[
function showUnique(show) {
var table = document.getElementById("table");
table.className = show ? "" : "hidden";
for (var j = 0; j < table.tHead.rows.length; ++j)
for (var i = 0; i < table.tHead.rows[j].cells.length; ++i)
if (table.tHead.rows[j].cells[i].className == "dyn")
table.tHead.rows[j].cells[i].colSpan = show ? 2 : 1;
}
//]]></script>
<form method="get" action="" onsubmit="return false;">
<p>
Zobraziť <input id="show-unique" type="checkbox" onclick="showUnique(this.checked)" checked="checked" /><br />
<script type="text/javascript">showUnique(document.getElementById("show-unique").checked)</script>
</p>
</form>
</body>
</html> |
||
|
Časová prodleva: 16 let
|
|||
0