Ergebnis 1 bis 2 von 2
  1. #1
    Garzec ist offline Grünschnabel
    registriert
    19-12-2016
    Beiträge
    1

    Tabellenspalte davor oder danach hinzufügen / Zeile drüber oder drunter hinzufügen

    Hallo,
    ich programmiere erst seit kurzer Zeit und möchte mit einer kleinen Tabellenanwendung üben. Dabei habe ich einen recht kurzen HTML-Code

    HTML-Code:
    <table id="dataTable">
        <thead id="tableHeader">
        </thead>
        <tbody id="tableBody">
        </tbody>
      </table>
    damit die Tabelle per Javascript dynamisch gefüllt werden kann. Über vier Buttons kann ich eine neue Spalte links oder rechts zu der vorherigen oder eine Zeile über oder unter der vorherigen anlegen. Um doppelten Code zu vermeiden, habe ich das Ganze auf zwei Funktionen beschränkt, über einen bool, der über einen Button gesetzt wird, entscheidet sich dann wo das neue Element platziert werden soll.

    Der Code für die Spalten:

    Code:
    function AddColumn(addLeft){ // Eine neue Spalte anlegen
    
      var header = $('#tableHeader'); // Das Header Element
      var headerContentToAppend = "<th>Header</th>"; // Ein default Text für die Header
      var table = $('#tableBody'); // Der Table Body
      var rowContentToAppend = "<td>Content</td>"; // Ein default Text für die Zellen
    
      if (addLeft) { // Füge die Spalte links ein
        header.prepend(headerContentToAppend);
      }
      else { // Füge die Spalte rechts ein
        header.append(headerContentToAppend);
      }
      $('table th').last().attr("contenteditable", true).focus(); // Fokussiere das letzte Element
      table.find("tr").each(function() { // Hole alle existierenden Zeilen
              $(this).append(rowContentToAppend); // Füge jeweils eine neue Zelle pro Zeile in der neuen Spalte hinzu
          });
    }
    Der Code für die Zeilen:

    Code:
    function AddRow(addUp){ // Eine neue Zeile anlegen
    
      var count = $('#tableHeader').find("th").length;  // Die Anzahl der Zellen in einer Reihe
      var rowToAppend = "<tr></tr>"; // Eine Zeile
      var table = $('#tableBody'); // Der Tablebody
      var newRow; // Die neue Reihe
      var contentToAppend = "<td>Content</td>"; // Der default Text
      if (addUp) { // Lege die Zeile über der fokussierten an
        newRow = table.prepend(rowToAppend);
      }
      else { // Lege die Zeile unter der fokussierten an
        newRow = table.append(rowToAppend);
      }
      for(var i = 0; i < count ; i++){
          newRow.find('tr').last().append(contentToAppend); // Fülle jede Zelle dieser Zeile anhand der Anzahl der Spalten
          $('table td').last().attr("contenteditable", true);
          $('table tr:last td:first').focus();
      }
    }
    Mein Problem ist dabei, die aktuell selektierte Zelle zu finden. Anhand dieser Zelle kann ja dann entschieden werden, wo die neue Spalte oder Zeile hin muss. Da ich Azubi bin und erst seit kurzem mit der Webentwicklung begonnen habe fällt mir das gar nicht so leicht und es wäre super wenn jemand helfen könnte

    - - - Aktualisiert - - -

    Kleiner Nachtrag, ich glaube

    Code:
    $('td').click(function(){
      var col = $(this).parent().children().index($(this));
      var row = $(this).parent().parent().children().index($(this).parent());
    });
    sollte mir schon weiterhelfen.
    Geändert von Garzec (19-12-2016 um 11:59 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Tabellenspalte davor oder danach hinzufügen / Zeile drüber oder drunter hinzufüge

    Zitat Zitat von Garzec Beitrag anzeigen
    sollte mir schon weiterhelfen.
    Nur bedingt, da man ja auch mit der Tastatur die Selektion verändern kann.

    Du solltest besser mit window.getSelection() und anchorNode bzw. focusNode (https://developer.mozilla.org/en-US/.../API/Selection) arbeiten.

    PS: Auch der <thead> muss ein <tr> haben, wo du die <th> einblenden willst.

Ähnliche Themen

  1. Antworten: 11
    Letzter Beitrag: 30-01-2013, 15:31
  2. Antworten: 0
    Letzter Beitrag: 03-11-2009, 21:20
  3. Antworten: 3
    Letzter Beitrag: 30-08-2006, 10:10
  4. Element hinzufügen IE
    Von topper23 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 15-02-2005, 14:56
  5. Automatisch Zeile in table hinzufügen
    Von donner77 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 17-08-2004, 12:14

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •