Tabelle erstellen lassen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Tabelle erstellen lassen

    Ich möchte auf meiner HTML Seite ein Formular anbieten, wo bestimmte Usern die Möglichkeit haben eine Tabelle erstellen zu lassen. Dazu muss der User die Anzahl der Reihen, Spalten und colspan's/rowspan's angeben können. Ich weiß leider nicht wie ich da Anfangen soll. Vor allem wüsste ich nicht, wie ich das bewerkstelligen soll, dass an einer Bestimmten stelle ein colspan rein kommt. Natürlich soll der User auch in die fertige Tabelle rein schreiben können, aber das kann ich ja mit dem INPUT Tag lösen.

    Vielleicht hat ja jemand eine Idee!
  • Das Forum ist ja etwas breit gefasst. Du willst mit JavaScript und AJAX arbeiten, oder?
    Hast du denn schon angefangen?

    Für den Anfang brauchst du nur zwei Anweisungen: createElement und appendChild.

    Quellcode

    1. var table = document.createElement('table');
    2. for(var i=0; i<10; i++) {
    3. var tr = document.createElement('tr');
    4. for(var j=0; j<10; j++)
    5. var td = document.createElement('td');
    6. td.innerHTML = i+'/'+j;
    7. tr.appendChild(td);
    8. }
    9. table.appendChild(tr);
    10. }
    11. document.getElementById('div').appendChild(table);
    Alles anzeigen


    Damit du das ganze besser steuern kannst, machst du dir am besten eine Klasse.

    Ein ganz guter Anhaltspunkt ist vielleicht mein Hexadoku Script: demo.easy-coding.de/hexadoku/
    demo.easy-coding.de/hexadoku/hexadoku.js
  • Hi,
    angefangen habe ich schon, da ich jedoch nicht viel von Javascript verstehe konnte ich nur den Teil mit HTML und etwas PHP einbauen. Mit deinem Script habe ich schon mal den Anfang und werde versuchen den zum laufen zu bringen. Mal sehen ob ich es hinbekomme.
    Danke dir.

    EDIT:
    So, ich muss zugeben, ich habe mich etwas verrechnet. An sich bekomme ich alles hin, zwar nur sehr langsam und schwer, aber ich würde vorankommen. Nur wäre es wesentlich einfacher für mich eine fertige Tabelle vorzugeben, denn die Eingaben müssen später noch per Formular verarbeitet werden. Hiermit hätte ich alles wie es sein soll:

    PHP-Quellcode

    1. <table border="1">
    2. <tr>
    3. <td>1</td>
    4. <td>2</td>
    5. <td>3</td>
    6. <td>4</td>
    7. <td>5</td>
    8. <td>6</td>
    9. <td>7</td>
    10. <td>8</td>
    11. <td>9</td>
    12. <td>10</td>
    13. <td>11</td>
    14. <td>12</td>
    15. </tr>
    16. <tr>
    17. <td class="<?php echo $x1; ?>"><input size="1" type="text" name="x1" value="<?php echo $x1; ?>"></td>
    18. <td class="<?php echo $x2; ?>"><input size="1" type="text" name="x2" value="<?php echo $x2; ?>"></td>
    19. <td class="<?php echo $x3; ?>"><input size="1" type="text" name="x3" value="<?php echo $x3; ?>"></td>
    20. <td class="<?php echo $x4; ?>"><input size="1" type="text" name="x4" value="<?php echo $x4; ?>"></td>
    21. <td class="<?php echo $x5; ?>"><input size="1" type="text" name="x5" value="<?php echo $x5; ?>"></td>
    22. <td class="<?php echo $x6; ?>"><input size="1" type="text" name="x6" value="<?php echo $x6; ?>"></td>
    23. <td class="<?php echo $x7; ?>"><input size="1" type="text" name="x7" value="<?php echo $x7; ?>"></td>
    24. <td class="<?php echo $x8; ?>"><input size="1" type="text" name="x8" value="<?php echo $x8; ?>"></td>
    25. <td class="<?php echo $x9; ?>"><input size="1" type="text" name="x9" value="<?php echo $x9; ?>"></td>
    26. <td class="<?php echo $x10; ?>"><input size="1" type="text" name="x10" value="<?php echo $x10; ?>"></td>
    27. <td class="<?php echo $x11; ?>"><input size="1" type="text" name="x11" value="<?php echo $x11; ?>"></td>
    28. <td class="<?php echo $x12; ?>"><input size="1" type="text" name="x12" value="<?php echo $x12; ?>"></td>
    29. </tr>
    30. <tr>
    31. <td class="<?php echo $x13; ?>"><input size="1" type="text" name="x13" value="<?php echo $x13; ?>"></td>
    32. <td class="<?php echo $x14; ?>"><input size="1" type="text" name="x14" value="<?php echo $x14; ?>"></td>
    33. <td class="<?php echo $x15; ?>"><input size="1" type="text" name="x15" value="<?php echo $x15; ?>"></td>
    34. <td class="<?php echo $x16; ?>"><input size="1" type="text" name="x16" value="<?php echo $x16; ?>"></td>
    35. <td class="<?php echo $x17; ?>"><input size="1" type="text" name="x17" value="<?php echo $x17; ?>"></td>
    36. <td class="<?php echo $x18; ?>"><input size="1" type="text" name="x18" value="<?php echo $x18; ?>"></td>
    37. <td class="<?php echo $x19; ?>"><input size="1" type="text" name="x19" value="<?php echo $x19; ?>"></td>
    38. <td class="<?php echo $x20; ?>"><input size="1" type="text" name="x20" value="<?php echo $x20; ?>"></td>
    39. <td class="<?php echo $x21; ?>"><input size="1" type="text" name="x21" value="<?php echo $x21; ?>"></td>
    40. <td class="<?php echo $x22; ?>"><input size="1" type="text" name="x22" value="<?php echo $x22; ?>"></td>
    41. <td class="<?php echo $x23; ?>"><input size="1" type="text" name="x23" value="<?php echo $x23; ?>"></td>
    42. <td class="<?php echo $x24; ?>"><input size="1" type="text" name="x24" value="<?php echo $x24; ?>"></td>
    43. </tr>
    44. <tr>
    45. <td class="<?php echo $x25; ?>"><input size="1" type="text" name="x25" value="<?php echo $x25; ?>"></td>
    46. <td class="<?php echo $x26; ?>"><input size="1" type="text" name="x26" value="<?php echo $x26; ?>"></td>
    47. <td class="<?php echo $x27; ?>"><input size="1" type="text" name="x27" value="<?php echo $x27; ?>"></td>
    48. <td class="<?php echo $x28; ?>"><input size="1" type="text" name="x28" value="<?php echo $x28; ?>"></td>
    49. <td class="<?php echo $x29; ?>"><input size="1" type="text" name="x29" value="<?php echo $x29; ?>"></td>
    50. <td class="<?php echo $x30; ?>"><input size="1" type="text" name="x30" value="<?php echo $x30; ?>"></td>
    51. <td class="<?php echo $x31; ?>"><input size="1" type="text" name="x31" value="<?php echo $x31; ?>"></td>
    52. <td class="<?php echo $x32; ?>"><input size="1" type="text" name="x32" value="<?php echo $x32; ?>"></td>
    53. <td class="<?php echo $x33; ?>"><input size="1" type="text" name="x33" value="<?php echo $x33; ?>"></td>
    54. <td class="<?php echo $x34; ?>"><input size="1" type="text" name="x34" value="<?php echo $x34; ?>"></td>
    55. <td><input class="<?php echo $x35; ?>" size="1" type="text" name="x35" value="<?php echo $x35; ?>"></td>
    56. <td><input class="<?php echo $x36; ?>" size="1" type="text" name="x36" value="<?php echo $x36; ?>"></td>
    57. </tr>
    58. </table>
    Alles anzeigen


    Ich muss nur noch irgendwie ein Funktion anlegen, mit der irgendwie per Maus mehrere Zellen miteinander verbunden werden. Z.B. soll bei der untersten Reihe Spalte 3 und 4 per colspan="2" verbunden werden. Das ganze muss per Javascript geschehen, denn die Seite sollte nicht jedesmal neu geladen werden, wenn Zellen verbunden werden.

    Dein Script oben hast du aber nicht um sonst gepostet, denn ich kann es sehr, sehr gut für ein anderes Projekt gebrauchen.
    Mal sehen, wo war nochmal deine Wunschliste? :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von x16 ()

  • Nungut.. die Spalten mit JavaScript zu verbinden ist eigentlich kein Problem.. einfach td.colSpan = 2 setzen
    Allerdings hast du dann das Problem, wie du dir den Zustand merken willst.
    Zur Zeit pflegst du die Logik mit php UND javascript...

    Hier mal ein komplettes Beispiel zum Spalten verbinden

    Quellcode

    1. function col(elem) {
    2. td = elem.parentNode;
    3. td.colSpan = 2;
    4. return false;
    5. }


    Quellcode

    1. echo '<table border="1">';
    2. for($i=0; $i<10; $i++) {
    3. echo '<tr>';
    4. for($j=0; $j<10; $j++) {
    5. echo '<td>
    6. <span>'.$i.'/'.$j.'</span>
    7. <a href="#" onclick="return col(this)">&raquo;</a></td>';
    8. }
    9. echo '</tr>';
    10. }
    11. echo '</table>';
    Alles anzeigen
  • Wow, vielen Dank.

    Ich habe das ganze soweit meinen Vorstellungen angepasst: siehe Dateianhang.

    Es ergeben sich da noch folgende Probleme:
    1. Die Anzahl der TD'S ist zu hoch, wenn ich Zellen verbinde, so dass die Tabelle nach rechts ausbricht. Er müsste für jede Zelle die er verbindet, eine hinten weglassen.
    2. Ich habe das mit 1, 2 und 4 gemacht, damit der User so die Anzahl der colspans bestimmen kann. Mich stört nur, dass bei 1 dann im fertigen Quelltext colspan="1" steht. Ist unschön. Kann man das nicht stattdessen löschen lassen per JS?
    3. Wie du schon sagst: Wie soll ich den Zustand speichern? Hmm Gute Frage. Die Werte in den Tabellen sind ja kein Problem, aber zu den colspan's fällt mir nichts ein.

    Ich danke dir wirklich sehr für deine Hilfe. Sollten meine Fragen also zu viel des Guten sein. Entschuldige ich mich schon mal dafür.
    Dateien
    • tabelle.txt

      (10,5 kB, 297 mal heruntergeladen, zuletzt: )
  • ich habe erst heute Abend wieder Zeit zum Antworten.. vielleicht hilft dir ein Ansatz... habs nur in 5 Min runtergetippt.. funktionieren tut es leider nicht. Evtl. falsche Reihenfolge beim Aufruf von insertAfter.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de"><head>
    3. <title>tableman</title>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <script type="text/javascript">
    6. function col(elem, direction) {
    7. var td;
    8. if(direction == 'r') {
    9. td = elem.parentNode;
    10. } else {
    11. td = elem.parentNode.previousSibling;
    12. }
    13. td.colSpan = 2;
    14. insertAfter(
    15. td,
    16. td.getElementsByTagName('span')[0],
    17. td.nextSibling.getElementsByTagName('span')[0]
    18. );
    19. td.nextSibling.parentNode.removeChild(td.nextSibling);
    20. return false;
    21. }
    22. function insertAfter(parent, node, referenceNode) {
    23. parent.insertBefore(node, referenceNode.nextSibling);
    24. }
    25. </script>
    26. </head>
    27. <body>
    28. <?php
    29. echo '<table border="1">';
    30. for($i=0; $i<10; $i++) {
    31. echo '<tr>';
    32. for($j=0; $j<10; $j++) {
    33. echo '<td>
    34. <a href="#" onclick="return col(this,\'l\')">&laquo;</a>
    35. <span>'.$i.'/'.$j.'</span>
    36. <a href="#" onclick="return col(this,\'r\')">&raquo;</a></td>';
    37. }
    38. echo '</tr>';
    39. }
    40. echo '</table>';
    41. ?>
    42. </body>
    43. </html>
    Alles anzeigen
  • Meine Vermutung war aber korrekt.
    Du musst nur die Reihenfolge der Parameter tauschen - anschließend werden die Inhalte der beiden Spalten zusammengefasst:

    Quellcode

    1. insertAfter(td, td.nextSibling.getElementsByTagName('span')[0], td.getElementsByTagName('span')[0]);


    damit du beliebig viele Spalten zusammenfassen kannst, brauchst du noch

    Quellcode

    1. td.colSpan += 1;


    Jetzt mal eine andere Frage: Musst du die Informationen denn irgendwie abbilden können oder willst du einfach nur einen "Tabellen Wizard"
    Tabellen Wizards gibts ja schon von TinyMCE oder CKEditor - die haben auch alle Funktionen wie Tabellen verbinden/Zeilen verbinden/... (der code ist natürlich viel umfangreicher)

    UPDATE
    hat mich doch ein bisschen gereizt

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de"><head>
    3. <title>Tableman</title>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <style type="text/css">
    6. span {
    7. background-color:#efefef;
    8. padding:2px;
    9. margin:2px;
    10. }
    11. </style>
    12. <script type="text/javascript">
    13. function col(elem, direction) {
    14. var td, current;
    15. if(direction == 'r') {
    16. td = elem.parentNode;
    17. current = td.colSpan-1;
    18. } else {
    19. td = elem.parentNode.previousSibling;
    20. current = 0;
    21. }
    22. x = td.nextSibling.getElementsByTagName('span');
    23. y = td.getElementsByTagName('span')[td.colSpan-1];
    24. insertAfter(td, td.nextSibling.getElementsByTagName('span'), td.getElementsByTagName('span')[current]);
    25. td.colSpan += 1;
    26. td.nextSibling.parentNode.removeChild(td.nextSibling);
    27. return false;
    28. }
    29. function insertAfter(parent, node, referenceNode, direction) {
    30. if(direction == 'r') {
    31. for(var i=0; i<node.length; i++) {
    32. parent.insertBefore(node[i], referenceNode.nextSibling);
    33. }
    34. } else {
    35. for(var i=node.length-1; i>=0; i--) {
    36. parent.insertBefore(node[i], referenceNode.nextSibling);
    37. }
    38. }
    39. }
    40. </script>
    41. </head>
    42. <body>
    43. <?php
    44. echo '<table>';
    45. for($i=0; $i<10; $i++) {
    46. echo '<tr>';
    47. for($j=0; $j<10; $j++) {
    48. echo '<td>
    49. <a href="#" onclick="return col(this,\'l\')">&laquo;</a>
    50. <span>'.$i.'/'.$j.'</span>
    51. <a href="#" onclick="return col(this,\'r\')">&raquo;</a></td>';
    52. }
    53. echo '</tr>';
    54. }
    55. echo '</table>';
    56. ?>
    57. </body>
    58. </html>
    Alles anzeigen
  • Ja die Informationen müssen an das Formular übergeben werden, welches du mir ertsellt hast:
    Formulardaten in Datei speichern mit eigenem Style

    Der Wizard tinymce ist ganz gut, aber da kann ich doch die Daten nicht weiterverarbeiten (Variablen an das Formular übergeben) oder?

    Ich habe nochmal eine Frage. Irgendwie funktioniert das Zellenverbinden nicht wirklich. Wenn ich auf den Pfeil nach rechts klicke macht er ja colspan="2". Klicke ich in der gleichen Zelle dann wieder auf den Pfeil nach links verbindet sich die Zelle mit der davorliegenden und löscht z.T. Inhalte. Er sollte statdessen aber nur die Zellverbindung wieder rückgängig machen, also das colspan="2" wieder löschen oder wenn da schon 3 Zellen verbunden sind, sollte er eben die letzte Verbindung wieder auflösen.
    Also Pfeil nach rechts heißt immer "+1 colspan"
    und Pfeil nach links heißt immer "-1 colspan"
    So hatte ich mir das gedacht.

    Das Problem ist jetzt auch, dass das ganze Verbinden der Zellen mit deinem Code funktioniert, jedoch in meiner fertigen Tabellenstruktur nicht, da ich in jedem TD ein input Feld habe.

    Ich glaube, das ganze wird sehr aufwendig. Mir würde es daher schon reichen, wenn das verbinden der zellen richtig funktioniert. Den Rest mit dem Einbauen im mein Formular übergebe ich sonst an die Jobbörse. Ist ja sonst unzumutbar. :S
    Vielen Dank für deine Geduld.