Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [DOM] Operacje na tabelkach
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
lukasz_sosnowiec
Tak jak w temacie. Poprosiłbym kogoś o podanie wzoru poleceń za pomocą których można dodać nowy wiersz (wraz z komórkami) i wypełnić go dowolnym tekstem.

Ja próbowałem coś takiego
Kod
document.getElementById("tabela").insertRow ();
document.getElementById("tabela").rows[0].insertCell ();
document.getElementById("tabela").rows[0].cells[0].innerHTML = "tekst"
Joy-machine
Hmmm
1. używaj $ zamiast document.getElementById -> google,
2. poczytaj o appendChild -> google,
3. przyda się także getElementsByTagName -> google
lopik
  1. function addRow()
  2. {
  3. row = document.createElement('tr');
  4. td = document.createElement('td');
  5. txt = document.createTextNode('text ');
  6. td.appendChild(txt);
  7. row.appendChild(td);
  8.  
  9. get = document.getElementById('tab');
  10. get.appendChild(row);
  11. }


Na szybko, bo już nie myślę winksmiley.jpg
Resztę już sobie zrobisz smile.gif
lukasz_sosnowiec
Działa tylko na Operze ... ale dzięki - zawsze to już coś. Może niedługo dojdę jak zrobić żeby zadziałało w IE i Mozilli.
JaRoPHP
Cytat(Joy-machine @ 4.02.2007, 23:36:42 ) *
używaj $ zamiast document.getElementById
Tak? Joy-machine jeśli chcesz używać $ zamiast getElementById najpierw musisz napisac sobie funkcję...

lukasz_sosnowiec HTML DOM dodaje kilka właściwości i metod dla elementów <table />, <tbody /> i <tr /> dzięki czemu budowanie tabeli może być prostsze: DOM Table, DOM TableRow i DOM TableCell (dwa pierwsze linki powinny Cię zainteresować najbardziej).

Przykład:
  1. var oTable = document.createElement("table");
  2. oTable.setAttribute("border", "1");
  3.  
  4. var oTBody = document.createElement("tbody");
  5. oTable.appendChild(oTBody);
  6.  
  7. // tworzenie wiersza
  8. oTBody.insertRow(0);
  9. oTBody.rows[0].insertCell(0);
  10. oTBody.rows[0].cells[0].appendChild(document.createTextNode("Komórka 1"));
  11. oTBody.rows[0].insertCell(1);
  12. oTBody.rows[0].cells[0].appendChild(document.createTextNode("Komórka 2"));
  13.  
  14. document.body.appendChild(oTable);
Joy-machine
"Tak? Joy-machine jeśli chcesz używać $ zamiast getElementById najpierw musisz napisac sobie funkcję..."

No tak, alez trudność napisać taką funkcję, a kod od razu przyjemniejszy i w pracy i w oglądaniu. Ale zapomniaełem, tutaj trzeba wszystko napisać, bo google nie ostnieje.
lukasz_sosnowiec
Cytat(Joy-machine @ 5.02.2007, 13:15:50 ) *
"Tak? Joy-machine jeśli chcesz używać $ zamiast getElementById najpierw musisz napisac sobie funkcję..."

No tak, alez trudność napisać taką funkcję, a kod od razu przyjemniejszy i w pracy i w oglądaniu. Ale zapomniaełem, tutaj trzeba wszystko napisać, bo google nie ostnieje.


Więc skoro istnieje google to jaki jest sens istnienia jakichkolwiem for gdzie można zadać pytania komuś mądrzejszemu według ciebie? Nie trzeba być mądrym żeby odesłać kogoś do google.

Co do problemu to udało mi się.
W zasadzie próbowałem tak od początku - brakowało tylko podania argumentów w insertRow() i insertCell (). Co prawda dokumentacji mówiła że domyślnie przy nie podaniu argumentu nowy wiersz, komórka będzie doczepiany na koniec - w praktyce działa tylko na Operze ... reszta wymaga argumentu.

Z góry dziękuje za pomoc bo naprowadziła mnie do rozwiązania problemu. Przykład poniżej - może komuś się kiedyś przyda.
Kod
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<script type="text/javascript">

function fun () {
    with (document.getElementById ("tabela")) {
        insertRow(1);
        rows[1].insertCell(0);
        rows[1].insertCell(1);
        rows[1].cells[0].innerHTML = "2";
        rows[1].cells[1].innerHTML = "Kamil";
    }
}

</script>
    
</head>
<body onload="fun ();">
<table border="1" id="tabela">
    <tbody>
        <tr>
            <td>1</td>
            <td>Ania</td>
        </tr>
    </tbody>
</table>
</body>
</html>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.