Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [js][IE]Taby gitarowe ;)
qqrq
post 26.03.2008, 14:13:40
Post #1





Grupa: Zarejestrowani
Postów: 418
Pomógł: 8
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

Witam

Postanowiłem zrobić sobie małą aplikację w JS do wpisywania gitarowych tabulatur. Wszystko działa ładnie, ale nie pod IE (westchnienie). Żeby było śmieszniej nie wyrzuca mi żadnych błędów - po prostu nie widać tabelki, która powinna się załadować. Oto kod:

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  3.         "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5.  <head><!--  ščřžýŠČŘŽÝ -->
  6.   <meta name="generator" content="PSPad editor, www.pspad.com" />
  7.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8.   <title>...</title>
  9.   <script type="text/javascript" src="play.js"></script>
  10.  </head>
  11.  <body>
  12.   <div id="content">
  13.    <h1>Play!</h1>
  14.    <div id="play">
  15.  
  16.    </div>
  17.   </div> 
  18.   <script type="text/javascript">Initialize('play');</script>     
  19.  </body>
  20. </html>
[HTML] pobierz, plaintext


A teraz kodzik JS:

[HTML] pobierz, plaintext 
  1. var background = new Array('line.jpg','#ffffff');
  2. var note = new Array('30px','50px');
  3. var space = new Array('40px','40px');
  4. var max_frets = 24;
  5. var strings = 6;
  6.  
  7. var element;
  8.  
  9. function Initialize(id)
  10. {
  11.  element = document.getElementById(id);
  12.  
  13.  var table = document.createElement('table');
  14.  table.setAttribute('cellspacing','0');
  15.  table.setAttribute('cellpadding','0');
  16.  table.setAttribute('border','0');
  17.  for (var n=0;n<strings+2;n++)
  18.   table.appendChild(document.createElement('tr'));
  19.  
  20.  element.appendChild(table);
  21.  AddNode();
  22. }
  23.  
  24. function AddNode()
  25. {
  26.  var table = element.getElementsByTagName('table')[element.getElementsByTagName('table').length-1];
  27.  var tr = table.getElementsByTagName('tr');
  28.  for (var n=0;n<tr.length;n++)
  29.  {
  30.   var td = document.createElement('td');
  31.   if (n==0)
  32.    td.style.height = space[0];
  33.   else if (n==tr.length-1)
  34.    td.style.height = space[1];
  35.   else
  36.   {
  37.    td.style.height = note[0];
  38.    td.style.backgroundImage = 'url(''+background[0]+'\')';
  39.    td.style.backgroundRepeat = 'repeat-x';
  40.    td.style.backgroundPosition = 'center left';
  41.    td.setAttribute('onclick','SelectFret(this);');
  42.   }
  43.   td.backgroundColor = background[1];
  44.   td.style.width = note[1];
  45.   td.style.textAlign = 'center';
  46.   td.setAttribute('valign','center');
  47.   td.innerHTML = '&nbsp;';
  48.   tr[n].appendChild(td);
  49.  }
  50. }
  51.  
  52. function SelectFret(td)
  53. {
  54.  if (td.getElementsByTagName('select').length > 0) return;
  55.  var select = document.createElement('select');
  56.  var value = td.innerHTML;
  57.  td.innerHTML = '';
  58.  
  59.  var option = document.createElement('option');
  60.  option.text = '';
  61.  option.value = '';
  62.  if (option.value==value)
  63.   option.setAttribute('selected','selected');
  64.  select.appendChild(option);
  65.  
  66.  for (var k=1;k<=max_frets;k++)
  67.  {
  68.   var option = document.createElement('option');
  69.   option.text = k+'';
  70.   option.value = k+'';
  71.   if (option.value==value)
  72.    option.setAttribute('selected','selected');
  73.   select.appendChild(option);
  74.  }
  75.  
  76.  select.setAttribute('onblur','UnselectFret(this.parentNode);');
  77.  td.appendChild(select);
  78. }
  79. function UnselectFret(td)
  80. {
  81.  if (td.getElementsByTagName('select').length == 0) return;
  82.  var select = td.getElementsByTagName('select')[0];
  83.  var value = select.options[select.selectedIndex].value;
  84.  td.removeChild(select);
  85.  td.innerHTML = value;
  86.  if (td == td.parentNode.lastChild && value != '')
  87.   AddNode();
  88. }
[HTML] pobierz, plaintext


Dużo tego, więc omówię pokrótce:

Te 5 zmiennych na górze, to taka mała konfiguracja. Skrypt ładuje się przy pomocy funcji Initialize, która tworzy tabelkę, przypisuje jej odpowiednią ilość wierszy i przypisuje tabelkę do odpowiedniego elementu nadrzędnego. Funkcja AddNode dodaje nowe komórki do tabeli (tyle, ile jest wierszy). Pozostałe dwie funkcje służą do podawania odpowiednich wartości - SelectFret tworzy w komórce listę (wywoływana przy kliknięciu na komórkę), a UnselectFret usuwa listę wpisując wartość do komórki (wywołana przy zdarzeniu onblur na utworzonym wcześniej select-ie).

Czy ktoś mi może powiedzieć, czemu IE tego nie łyka?

EDIT

No to udało mi się. smile.gif Poprawiłem kod JS. W skrócie - IE ma problem z, nazwijmy to, "wprowadzaniem w życie" atrybutów ustalonych za pomocą metody "setAttribute" - trzeba było to pozamieniać na przypisywanie właściwościom odpowiednich wartości. Poza tym nie udało mi się (w IE) dodać do tabelki nowego wiersza, nowej komórki do wiersza tabeli i nowej opcji do selecta metodą "appendChild" - musiałem skorzystać z "insertRow" i "insertCell" i "add". A cały, poprawiony, kod wygląda tak:

[HTML] pobierz, plaintext 
  1. var background = new Array('line.jpg','#ffffff');
  2. var note = new Array('30px','50px');
  3. var space = new Array('40px','40px');
  4. var max_frets = 24;
  5. var strings = 6;
  6. var begin = '1px solid #000000';
  7.  
  8. var element;
  9.  
  10. function Initialize(id)
  11. {
  12.  element = document.getElementById(id);
  13.  
  14.  var table = document.createElement('table');
  15.  table.cellSpacing = 0;
  16.  table.cellPadding= 0;
  17.  table.border = 0;
  18.  for (var n=0;n<strings+2;n++)
  19.   table.insertRow(n);
  20.  
  21.  element.appendChild(table);
  22.  AddNode();
  23. }
  24.  
  25. function AddNode()
  26. {
  27.  var table = element.getElementsByTagName('table')[element.getElementsByTagName('table').length-1];
  28.  var tr = table.rows;
  29.  for (var n=0;n<tr.length;n++)
  30.  {
  31.   var td = tr[n].insertCell(tr[n].cells.length);
  32.   if (n==0)
  33.    td.style.height = space[0];
  34.   else if (n==tr.length-1)
  35.    td.style.height = space[1];
  36.   else
  37.   {
  38.    td.style.height = note[0];
  39.    td.style.backgroundImage = 'url(''+background[0]+'\')';
  40.    td.style.backgroundRepeat = 'repeat-x';
  41.    td.style.backgroundPosition = 'center left';
  42.    td.style.cursor = 'pointer';
  43.    td.onclick = function(){SelectFret(this);};
  44.    if (tr[n].cells.length == 1)
  45.     td.style.borderLeft = begin;
  46.   }
  47.   td.style.backgroundColor = background[1];
  48.   td.style.width = note[1];
  49.   td.style.textAlign = 'center';
  50.   td.vAlign = 'center';
  51.   td.innerHTML = '&nbsp;';
  52.  }
  53. }
  54.  
  55. function SelectFret(td)
  56. {
  57.  if (td.getElementsByTagName('select').length > 0) return;
  58.  var select = document.createElement('select');
  59.  var value = td.innerHTML;
  60.  td.innerHTML = '';
  61.  
  62.  var option = document.createElement('option');
  63.  option.text = '';
  64.  option.value = '';
  65.  if (option.value == value)
  66.   option.selected = true;
  67.  try
  68.  { select.add(option,null); }
  69.  catch(ex)
  70.  { select.add(option); }
  71.  
  72.  for (var k=0;k<=max_frets;k++)
  73.  {
  74.   var option = document.createElement('option');
  75.   option.text = k+'';
  76.   option.value = k+'';
  77.   if (option.value==value)
  78.    option.selected = true;
  79.   try
  80.   { select.add(option,null); }
  81.   catch(ex)
  82.   { select.add(option); }
  83.  }
  84.  
  85.  select.onblur = function(){ UnselectFret(this.parentNode); };
  86.  select.focus();
  87.  td.appendChild(select);
  88. }
  89. function UnselectFret(td)
  90. {
  91.  if (td.getElementsByTagName('select').length == 0) return;
  92.  var select = td.getElementsByTagName('select')[0];
  93.  var value = select.options[select.selectedIndex].value;
  94.  td.removeChild(select);
  95.  td.innerHTML = value;
  96.  if (td == td.parentNode.lastChild && value != '')
  97.   AddNode();
  98. }
[HTML] pobierz, plaintext


Kliknął bym sam sobie "pomógł", ale to by było małe przegięcie. guitar.gif

Ten post edytował qqrq 26.03.2008, 14:15:17


--------------------
Poezja śpiewana ;) | Niunia | Nic ciekawego...
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 8.07.2025 - 01:49
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn