Tabela, wiersz po wierszu - innerHTML Opcje

[Malinaa]

Witam,

mam taką pętle:

[js]
for(i=0;i<response.result.length;i++) {
var div = document.createElement('div');
div.style.display = 'block';

div.innerHTML = '<table width="100%" cellspacing="1" cellpadding="0" border="0"><tr><td align="left" valign="middle" width="20">'+response.result[i].message+'</td></tr></table>';

document.getElementById('sb_Log').appendChild(div);
}
[/js]

a chciałbym mieć tak:

[js]
var div = document.createElement('div');
div.style.display = 'block';

div.innerHTML = '<table width="100%" cellspacing="1" cellpadding="0" border="0">'; // Not ok

for(i=0;i<response.result.length;i++) {
div.innerHTML = '<tr><td align="left" valign="middle" width="20">'+response.result[i].message+'</td></tr>';

document.getElementById('sb_Log').appendChild(div); // Co z tym ? ? ?
}

div.innerHTML = '</table>'; // Not ok
[/js]

Jak to zrobić, aby działało prawidłowo, tworzyło div.innerHTML krok po kroku, wiersz za wierszem, a nie jak jest teraz całe tabele?

Ten post edytował Malinaa 1.09.2010, 10:02:32

[kamil4u]

div.innerHTML += 'to co dodane';
czyli:

Kod

div.innerHTML = '<table width="100%" cellspacing="1" cellpadding="0" border="0">';

for(i=0;i<response.result.length;i++)
  div.innerHTML += '<tr><td align="left" valign="middle" width="20">'+response.result[i].message+'</td></tr>';

div.innerHTML += '</table>'; // Not ok
document.getElementById('sb_Log').appendChild(div);

[Malinaa]

Próbowałem w ten sposób, ale nie wiem dlaczego w tym przypadku jakby nie były widziany kod html.
Wyświetla wszystko w jednym ciągu znaków, bez sytli css i wierszy, jedna ciągła linia?

[kamil4u]

Nie rozumiem... opisz dokładniej, pokaż kod i wynik jaki dostałeś i jaki chcesz dostać .

[Malinaa]

Oto cały kod:

[HTML] pobierz, plaintext 
var div = document.createElement('div');
div.style.display = 'block';
div.innerHTML = '<table width="100%" cellspacing="1" cellpadding="0" border="0">';
 
for(i=0;i<response.result.length;i++) {
 // Tlo kolumny wiersza
 if (i%2 != 0) {
 clas = 'tdWierszOne2';
 }
 else {
  clas = 'tdWierszOne1';
 }
 div.innerHTML += '<tr><td align="left" valign="middle" width="20" class="'+clas+'"><img src="'+usr+'" alt="IP: '+response.result[i].ip+', data: '+response.result[i].date+'" title="IP: '+response.result[i].ip+', data: '+response.result[i].date+'"></td><td align="left" class="'+clas+'"><a href="#" class="linkZwykly5" title="Profil: '+response.result[i].author+'"><b>'+response.result[i].author+':&nbsp;</b></a>&nbsp;'+response.result[i].message+'</td></tr>';
 }
 div.innerHTML += '</table>';
 if (response.sesja == '') {
 document.getElementById('sb_chatLogout').appendChild(div);
}
else {
 document.getElementById('sb_chatLog').appendChild(div);
}
[HTML] pobierz, plaintext 

Przy Twoich wskazaniach wygląda tak:

[ img ]

W moim wykonaniu narazie jest tak:

[ img ]

Do końca tygodnia chcę ukończyć shoutboxa, a pierwszy raz robię coś w ajax js, będę wdzięczny za pomoc.

Chciałbym pozbyć się wierszy tabel, które generuje skrypt i mieć jedną tabele i wiele wierszy w tej jednej tabeli.

Ten post edytował Malinaa 3.09.2010, 09:31:47

[kamil4u]

Powinno działać - zobacz co masz w firebug-u i w którym miejscu nie działa skrypt. IMO Powinieneś mieć poprawną formę/strukturę HTML i to by rozwiązało wszelkie problemy:

Kod

<ul id="southbox">
   <li>
      <div>
         <cite>Autor</cite>
         <span>Data</span>
      </div>
      <blockquote>
         <p>Treść wiadomości</p>
      </blockquote>
   </li>
</ul>

, a wszystkie elementy tworzyć za pomoc odpowiednich metod do tworzeni DOM: document.createElement, element.setAttribute, element.appendChild, element.createTextNode
Miałem kiedyś w 'miarę podobny' problem: http://forum.webhelp.pl/viewtopic.php?t=20...p;view=previous