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

[Garzec]

Hallo,
ich programmiere erst seit kurzer Zeit und möchte mit einer kleinen Tabellenanwendung üben. Dabei habe ich einen recht kurzen 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:

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:

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

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
});

sollte mir schon weiterhelfen.

 

[kkapsner]

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/docs/Web/API/Selection) arbeiten.

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