letzte Spalte einer Tabelle soll genau so breit sein wie Inhalt

[Forumsgast]

Nabend allerseits,

ich stelle die Breite einer Tabelle auf 100%, so dass sich alle Spalten ausdehnen können, lediglich die jeweils letzte Spalte der Tabelle soll genau so breit sein wie deren (breitester) Inhalt.

Folgender CSS code macht dies :

table {
  width: 100%;
  border-collapse: collapse;
}

td {
    border: 1px solid #000;
}

tbody tr td:last-child {
    white-space: nowrap;
    background: red;
    width: 1%;
}

th {
  text-align: left;
}

input {
  width: calc(100% - 6px);
 }

Jedoch funktioniert dies nur auf einer "traditionellen" Tabelle (siehe Tabelle 1),
meine Tabelle ist jedoch wie Tabelle 2 aufgebaut, d.h. in jeder td steht der Wert in einem Input Feld (zwecks späterer Verarbeitung).
Jemand ne Idee wies klappen könnte ?

<table>

  <tr>
    <th>Name</th>
    <th>Vorname</th>
    <th>Notizen</th>
  </tr>

  <tbody>
      <tr>
          <td>Müller</td>
          <td>Hans-Dieter</td>
          <td>hat rote Haare</td>
      </tr>
      <tr>
          <td>Von der Thommen</td>
          <td>Jupp</td>
          <td>trinkt gern abgestandenes Bier</td>
      </tr>
      <tr>
          <td>Von der Vogelweide</td>
          <td>Walter</td>
          <td>Schriftsteller</td>
      </tr>

    </tbody>

</table>




<table>

  <tr>
    <th>Name</th>
    <th>Vorname</th>
    <th>Notizen</th>
  </tr>

  <tbody>
      <tr>
          <td><input value='Müller'></td>
          <td><input value='Hans-Dieter'></td>
          <td><input value='hat rote Haare'></td>
      </tr>
      <tr>
          <td><input value='Von der Thommen'></td>
          <td><input value='Jupp'></td>
          <td><input value='trinkt gern abgestandenes Bier'></td>
      </tr>
      <tr>
          <td><input value='Von der Vogelweide'></td>
          <td><input value='Walter'></td>
          <td><input value='Schriftsteller'></td>
      </tr>

    </tbody>

</table>

[Forumsgast]

Jedoch funktioniert dies nur auf einer "traditionellen" Tabelle (siehe Tabelle 1),
meine Tabelle ist jedoch wie Tabelle 2 aufgebaut, d.h. in jeder td steht der Wert in einem Input Feld (zwecks späterer Verarbeitung).
Jemand ne Idee wies klappen könnte ?

Mit reinem CSS? Garnicht. Mit einer Priese JS (und einem zusätzlichen Element) wäre das möglich. Ich würde aber nicht einfach alle Werte auf Verdacht in input-Elemente stecken sondern je Datensatz ein Formular verwenden (entweder auf einer eigenen Seite oder per modal-Dialog), evtl. wäre auch noch die Verwendung des contenteditable-Attributs eine Lösung.

[Forumsgast]

Ich denke wir haben uns falsch verstanden : nicht das Input Feld selbst soll sich der Grösse seines Inhaltes anpassen sondern die letzte Spalte der Tabelle, also die jeweils letzte <td></td> der Tabelle.

Tabellen haben dieses Verhalten ja standardmässig, jedoch nicht, sobald diese auf 100% width gesetzt ist was bei mir der Fall ist.

Wie gesagt einen guten Ansatz habe ich gefunden in folgendem Beitrag :

html - Fit cell width to content - Stack Overflow



Dies funktioniert wunderbar bei einer Standardtabelle(siehe Tabelle 1), => dort passt sich die Breite der letzten Spalte an den Inhalt des längsten Wertes an was mein Ziel ist
Meine Tabelle hat jedoch in jedem td Element noch ein Input Feld (siehe Tabelle 2), somit funktioniert dieser Ansatz nicht mehr und die Spalte passt sich nun blöderweise an die Länge des letzten th Elementes an ...

Ich würde aber nicht einfach alle Werte auf Verdacht in input-Elemente stecken

Das Arbeiten mit Inputfeldern in meinen Tabellen erleichtert vieles : sobald ich mein Formular abschicke, habe ich alle Values (inkl. die der gesetzten Checkboxen),
beim Einlesen der Daten in die Tabelle geb ich den Input Feldern aussagekräftige Namen mit deren Id mit (z.B. contacts[15], beim Neuerstellen eines Kontaktes in der Tabelle
brauch ich nur eine neue Spalte einfügen mit z.B. Name newContacts was zum späteren Verarbeiten in meiner php Datei vieles vereinfacht.

[Forumsgast]

Ich denke wir haben uns falsch verstanden : nicht das Input Feld selbst soll sich der Grösse seines Inhaltes anpassen sondern die letzte Spalte der Tabelle, also die jeweils letzte <td></td> der Tabelle.

Schon klar. Ich bin jetzt davon ausgegangen dass dien input-Elemente so groß sein sollen dass der ganze Text zu sehen ist (dadurch wird die Spalte dann automatisch breit genug) - wenn die Spalten so breit sind wie der Text, die input-Elemente aber schmäler bringt da ja irgendwie nicht so wirklich was …

Das Arbeiten mit Inputfeldern in meinen Tabellen erleichtert vieles : sobald ich mein Formular abschicke, habe ich alle Values (inkl. die der gesetzten Checkboxen),
beim Einlesen der Daten in die Tabelle geb ich den Input Feldern aussagekräftige Namen mit deren Id mit (z.B. contacts[15], beim Neuerstellen eines Kontaktes in der Tabelle
brauch ich nur eine neue Spalte einfügen mit z.B. Name newContacts was zum späteren Verarbeiten in meiner php Datei vieles vereinfacht.

Mir ist nicht so ganz klar was daran einfacher sein soll und warum du zum erstellen eines neuen Kontakts eine neue Spalte brauchst (wohl eher eine neue Zeile?) - ich halte es aber immer noch für keine gute Idee immer alle Datensätze anzufassen, so häufig werden sich die einzelnen Datensätze wohl kaum ändern. Unter Umständen könntest du bei sehr vielen Datensätzen (bei vielen Spalten auch bei garnicht so vielen Zeilen) auch Probleme mit der Einstellung max_input_vars bekommen, das solltest du auf jeden Fall mal im Hinterkopf behalten.

[Forumsgast]

ich halte es aber immer noch für keine gute Idee immer alle Datensätze anzufassen, so häufig werden sich die einzelnen Datensätze wohl kaum ändern

Denke da hast du recht. Bisher habe ich beim Einlesen der Daten aus der Datenbank beim Erstellen der Tabellen immer jede Zelle (td) einer Zeile (tr) ein Text Input Feld verpasst mit einem eindeutiges Name Attribut (z.B. bank['5']'[iban']).
Ob der Inhalt verändert/gelöscht wurde oder nicht, ich hab immer ALLE Daten meiner Tabellen (und ich hab mehrere) nach Submit-Event mitgeschickt und in der Datenbank ALLE Daten per Schleife ausgelesen
und deren Inhalt per Update/Delete Statement aktualisiert.

Ich hab jetzt mein Konzept komplett überarbeitet und schreibe alle veränderten Daten direkt in mein Formdata Objekt: Beim Einlesen der Daten in meine Tabellen vergebe ich nur noch die ID (= Primärschlüssel) per Data-Attribut an die jeweilige Zeile (tr Element).
Somit kann ich immer genaustens verfolgen, welche Zelle verändert/hinzugefügt wurde.

Den Tabellen verpasse ich ein Doppel Click Event, damit die angeklickte Zelle 'freigeschaltet' wird ('contenteditable = true') und verpasse dieser Zelle ein Blur-Event,
bei dem ich feststelle, ob die Zelle verändert/gelöscht wurde und um sie dann wieder zu 'sperren' ('contenteditable = false'). Wenn die Zelle verändert wurde, dann schreib ich mir den jeweiligen Key samt Wert
in mein FormData Objekt.

Somit kann ich bei Speichern direkt mein FormData Obkjekt fer Fetch als body mitgeben und meine php Datei erhält nur die Daten, die abgeändert bzw gelöscht werden müssen,
was den Datentraffic um einiges verringern sollte.

Ist das ein guter Ansatz mit dem ich weiterarbeiten kann oder gehts besser/einfacher ?

PS: wenn ich meinem TR bzw TD Element ein Höhe von z.B. 1.5 em verpasse :

tr td {
height: 1.5em;
}

dann wird dies bei jedem neu angelegten Datensatz beim verlassen der Zelle wenn diese leer bleibt nicht respektiert, ich habe dies deshalb beim Erstellen ekiner jeden neuen TR
per Inline CSS definiert was mir nicht so gefällt. Alle 'Hacks' die ich für dieses Problem bei einer leeren Zelle gefunden habe greifen nicht, jemand ne Idee
um dies in der CSS Datei zu erledigen ?

<html>
<head>
<style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        cursor: pointer;
    }
    th:not(:nth-of-type(3)) {
        overflow: auto;
        resize: horizontal;
    }
    th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    tr:nth-child(even) {
        background-color: #dddddd;
    }
    th:last-child, td:last-child {
      width: 4em;
    }
    .hide-delete tr td:last-child, th:last-child {
        display: none;
    }
    table tr:empty {
      height: 1.5em;
      max-height: 1.5em;
    }
</style>
</head>
<body>
<h2>Tabelle Kontakte</h2>
<button type='button' id = 'add' data-counter = '1'>Hinzufügen</button>
<br><br>
<button type='button' id = 'modify'>Löschen</button>
<br><br>
<button type='button' id = 'showDataToSubmit'>gesammelte Daten zeigen</button>
<br><br>
<table class = 'hide-delete'>
  <thead>
    <tr>
      <th data-header='company'>Firma </th>
      <th data-header='contact'>Kontakt</th>
      <th data-header='country'>Land</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

     <tr data-id = '5'>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>DELETE</td>
     </tr>

    <tr data-id = '2'>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
      <td>DELETE</td>
    </tr>

    <tr data-id = '4'>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
      <td>DELETE</td>
    </tr>

    <tr data-id = '6'>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
      <td>DELETE</td>
    </tr>

    <tr data-id = '8'>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
      <td>DELETE</td>
    </tr>

    <tr data-id = '15'>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
      <td>DELETE</td>
    </tr>
    </tbody>
</table>

<script>

btnAdd = document.getElementById('add');
btnModify = document.getElementById('modify');
btnshowDataToSubmit = document.getElementById('showDataToSubmit');
tableContact = document.querySelector('table');
const headersTableContact = [...tableContact.querySelectorAll('th')].map(header => header.dataset.header)

updateTableContact = new FormData();

btnshowDataToSubmit.addEventListener('click', async () => {
    showDataToSubmit();
    const response = await fetch('endpoint.php',
        {method: 'POST',
         body: updateTableContact }
    );
})

tableContact.querySelector('tbody').addEventListener('dblclick', function (e) {
    e.target.setAttribute('contenteditable', 'true');
    clickedCellIndex = e.target.cellIndex;
    id = e.target.closest('tr').dataset.id;
    e.target.focus();
    checkDataTableCell (id, clickedCellIndex, e);
});

btnAdd.addEventListener('click', () => {
    const insertNewRow = tableContact.querySelector('tbody').insertRow(-1);
    insertNewRow.closest('tr').setAttribute('data-id', `new[${btnAdd.dataset.counter}]`);
    btnAdd.dataset.counter ++;
    const totalCells = tableContact.rows[0].cells.length;
    for (let i = 0; i < totalCells; i++) {
        if (i < totalCells -1) {
          insertNewRow.insertCell(i).style.height ='35px';
        } else {
          insertNewRow.insertCell(i).innerHTML = 'DELETE';
        }
    }
    const clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('dblclick', true, true);
    tableContact.querySelector('tr:last-child td:nth-of-type(1)').dispatchEvent (clickEvent);
})

btnModify.addEventListener('click', () => {
    tableContact.classList.remove('hide-delete');
})

tableContact.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.textContent == 'DELETE') {
        id = e.target.closest('tr').dataset.id;
        e.target.closest('tr').remove();
        removeFieldsFromUpdateTableContact (id);
    }
})

function showDataToSubmit() {
  for (let [key, val] of updateTableContact.entries()) {
        console.log(key + ' ' + val);
  }
}
function checkDataTableCell (id, clickedCellIndex, e) {
    oldValue = e.target.textContent;
    e.target.addEventListener('blur', function() {
        newValue = e.target.textContent;
        this.removeAttribute('contenteditable', 'true');
        if (oldValue != newValue) {
          if (id.includes('new')) {
            let idNumber = id.replace(/[^0-9]/g, "");
            updateTableContact.set(`newContact[${idNumber}][${headersTableContact[clickedCellIndex]}]`, newValue);
          } else {
            updateTableContact.set(`modifyContact[${id}][${headersTableContact[clickedCellIndex]}]`, newValue);
          }
        }
    })
}

function removeFieldsFromUpdateTableContact (id) {
  if (isNaN(id)) {
    let idNumber = id.replace(/[^0-9]/g, '');
    keyMatch = `newContact[${idNumber }]`;
  } else {
    keyMatch = `modifyContact[${id}]`;
    updateTableContact.set(`deleteContact[${id}]`, id);
  }
  for(let [key, value] of Array.from(updateTableContact.entries())) {
    if (key.includes(keyMatch)) updateTableContact.delete(key);
  }
}

</script>

[Forumsgast]

Den Tabellen verpasse ich ein Doppel Click Event, damit die angeklickte Zelle 'freigeschaltet' wird ('contenteditable = true') und verpasse dieser Zelle ein Blur-Event,
bei dem ich feststelle, ob die Zelle verändert/gelöscht wurde und um sie dann wieder zu 'sperren' ('contenteditable = false').

Tipp: das setAttribute() ist nicht nötig um das Attribut zu setzen, über e.target.contentEditable = 'true'; geht das einfacher.

Ist das ein guter Ansatz mit dem ich weiterarbeiten kann oder gehts besser/einfacher ?

Die Zugänglichkeit ist halt beim Teufel - per Screenreader funktioniert das nicht und auch per Tastatur sind die Felder nicht bearbeitbar bzw. gar nicht erreichbar. Warum nicht per dialog-Box ein kleines Formular öffnen um den Datensatz zu bearbeiten?

Alle 'Hacks' die ich für dieses Problem bei einer leeren Zelle gefunden habe greifen nicht, jemand ne Idee
um dies in der CSS Datei zu erledigen ?

Ein

td:empty::after{
  content: "\00a0";
}

reicht bei mir …

[Forumsgast]

Ich finde es übersichtlicher, wenn man die Felder direkt in der Tabelle bearbeiten kann, wohl Geschmacksache.

auch per Tastatur sind die Felder nicht bearbeitbar bzw. gar nicht erreichbar

Ich habs noch ein bisschen bearbeitet : es reicht jetzt ein Klick, um die ganze Zeile zu "entsperren" und dann kann man auch per Tab Taste
die Felder der gesamten Zeile erreichen und löschen geht dann auch nicht nur mit der Maus sondern auch per Enter Taste.

Bloss eine Sache die ich nicht rausfinde : Nachdem eine Zeile verlassen wird die bearbeitet wurde, setze ich wieder deren Felder auf contenteditable false.
Ausserdem möchte ich dann ebenfalls deren Eventhandler löschen => Eventhandler auf anonyme Funktionen kann man ja nicht per Eventhandler. remove löschen,
ich hab denen somit eine Variable verpasst => allCellsOfClickedRow[i].addEventListener('focus', funcFocus = function(e)
aber ich schaffe es trotzdem nicht, diese per Schleife zu löschen => allCellsOfRow[i].removeEventListener('focus', funcFocus);
Was ist falsch an meinem Code ?

!DOCTYPE html>
<html>
<head>
    <style>

        table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        cursor: pointer;
        }
        td, th {
        border: 1px solid lightgrey;
        text-align: left;
        padding: 8px;
        }
        tr:nth-child(even) {
        background-color: lightblue;
        }
        tbody tr {
        height: 2.5em;
        }
        tbody tr td:last-child {
            white-space: nowrap;
            width: 1%;
        }
        .hide-delete-icon {
             tr td:last-child, th:last-child {
            display: none;
        }
        .activeTableCell {
            background-color: grey;
            color: white;
        }
    </style>
</head>
<body>
<button type='button' id='btnAddRow' data-counter='1'>Add</button>
<button type='button' id = 'btnDeleteRow'>Löschen</button>
<button type='button' id = 'btnShowData'>Show Data</button>
<h2>HTML Table</h2>
<table class='hide-delete-icon' data-idclickedrow='0'>
   <thead>    
        <tr>
            <th data-header='company'>Company</th>
            <th data-header='contact'>Contact</th>
            <th data-header='country'>Country</th>
            <th></th>
        </tr>
    <thead>
    <tbody>
        <tr data-id ='5'>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
            <td class='remove'>DELETE</td>
        </tr>
        <tr data-id ='8'>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td class='remove'>DELETE</td>
        </tr>
        <tr data-id ='7'>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
            <td class='remove'>DELETE</td>
        </tr>
        <tr data-id ='9'>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>United Kingdom</td>
            <td class='remove'>DELETE</td>
        </tr>
        <tr data-id= '10'>
            <td>Laughing Bacchus Winecellars</td>
            <td>Yoshi Tannamuri</td>
            <td>Canada</td>
            <td class='remove'>DELETE</td>
        </tr>
    </tbody>
</table>
<script>
  myTable = document.querySelector('table');
  btnAddRow = document.getElementById('btnAddRow');
  btnDelete = document.getElementById('btnDeleteRow');
  btnShowData = document.getElementById('btnShowData');

  const headersTableContact = [...myTable.querySelectorAll('th')].map(header => header.dataset.header)
  updateTableContact = new FormData();
  btnAddRow.addEventListener('click', () => {
        const insertNewRow = myTable.querySelector('tbody').insertRow(-1);
        insertNewRow.closest('tr').setAttribute('data-id', `new[${btnAddRow.dataset.counter}]`);
        btnAddRow.dataset.counter ++;
        const totalCells = myTable.rows[0].cells.length;
        for (let i = 0; i < totalCells; i++) {
            if (i < totalCells -1) {
                insertNewRow.insertCell(i);
            } else {
                insertNewRow.insertCell(i).innerHTML = '<td class="remove">DELETE</td>';
            }
        }
        const clickEvent = document.createEvent ('MouseEvents');
        clickEvent.initEvent ('click', true, true);
        myTable.querySelector('tr:last-child td:nth-of-type(1)').dispatchEvent (clickEvent);
  })

    btnDeleteRow.addEventListener('click', () => {
        myTable.classList.remove('hide-delete-icon');
    })


    myTable.querySelector('tbody').addEventListener('click', function (e) {
        if (e.target.textContent == 'DELETE') {
            clickedRowId = e.target.closest('tr').dataset.id;
            e.target.closest('tr').remove();
            removeFieldsFromUpdateTableContact (clickedRowId);
            return;
        }
    previousRowId = myTable.dataset.idclickedrow;
    oldValueOfCell = e.target.closest('tr td').textContent;
    clickedRow = e.target.closest('tr');
    clickedRowId = clickedRow.dataset.id;
    myTable.setAttribute('data-idclickedrow', clickedRowId);
    allCellsOfClickedRow = clickedRow.children;
    len = allCellsOfClickedRow.length;
    for (let i = 0; i < len; i++) {
        allCellsOfClickedRow[i].contentEditable = true;
        allCellsOfClickedRow[i].classList.add('activeTableCell');
        allCellsOfClickedRow[i].addEventListener('focus', funcFocus = function(e) {
        oldValueOfCell = this.textContent;
        })
        allCellsOfClickedRow[i].addEventListener('blur', funcBlur = function(event) {
            cellIndex = this.cellIndex;
            newValueOfCell = this.textContent;
            if (oldValueOfCell != newValueOfCell) {
              if (clickedRowId.startsWith('new')) {
                let idNumber = clickedRowId.replace(/[^0-9]/g,'');
                updateTableContact.set(`newContact[${idNumber}][${headersTableContact[cellIndex]}]`, newValueOfCell);
              } else {
                updateTableContact.set(`modifyContact[${clickedRowId}][${headersTableContact[cellIndex]}]`, newValueOfCell);
              }
            }
         })
    }
    if ( (previousRowId != clickedRowId) && (previousRowId != 0) ) {
        oldRow = document.querySelector(`tr[data-id="${previousRowId}"]`);
        if (oldRow) {
            allCellsOfRow = oldRow.children;
            for (let i = 0; i < len; i++) {
            allCellsOfRow[i].contentEditable = false;
            allCellsOfRow[i].classList.remove('activeTableCell');
            allCellsOfRow[i].removeEventListener('focus', funcFocus);
            allCellsOfRow[i].removeEventListener('blur',funcBlur);
            }
        }
    }
    e.target.focus();

  })

  btnShowData.addEventListener('click', () => {
        showDataToSubmit ();
  })
  function showDataToSubmit() {
    for (let [key, val] of updateTableContact.entries()) {
      console.log(key + ' ' + val);
    }
  }
  function removeFieldsFromUpdateTableContact (clickedRowId) {
    if (isNaN(clickedRowId)) {
        let idNumber = clickedRowId.replace(/[^0-9]/g, '');
        keyMatch = `newContact[${idNumber }]`;
    } else {
        keyMatch = `modifyContact[${clickedRowId}]`;
        updateTableContact.set(`deleteContact[${clickedRowId}]`, clickedRowId);
    }
    for(let [key, value] of Array.from(updateTableContact.entries())) {
        if (key.includes(keyMatch)) updateTableContact.delete(key);
    }
  }

  myTable.addEventListener('keydown', function(e) {
    if (e.target.textContent.trim() == 'DELETE' && e.keyCode == 13) e.target.click() ;
  })



</script>

[Forumsgast]

Ich habs noch ein bisschen bearbeitet : es reicht jetzt ein Klick, um die ganze Zeile zu "entsperren" und dann kann man auch per Tab Taste
die Felder der gesamten Zeile erreichen und löschen geht dann auch nicht nur mit der Maus sondern auch per Enter Taste.

Das bringt nur leider überhaupt nichts: das Editieren der Zeile lässt sich per Tastatur nicht aktivieren, da ist es egal ob das mit Klick oder Doppelklick geschieht - eine Tabellenzelle ist kein interaktives Element (wie Button oder Link wobei letzteres hier falsch wäre) und kann damit nicht per Tastatur ausgewählt werden.

Ausserdem möchte ich dann ebenfalls deren Eventhandler löschen => Eventhandler auf anonyme Funktionen kann man ja nicht per Eventhandler. remove löschen,
ich hab denen somit eine Variable verpasst => allCellsOfClickedRow[i].addEventListener('focus', funcFocus = function(e)

Eben, eine Variable - du schreibst alle Eventhandler in die gleiche Variable, deswegen funktioniert das Löschen wohl nicht. Du könntest aber auch einfach einen focus-Handler auf tbody setzen und die entsprechende Zelle in dem Handler abfragen.

Noch zwei/drei Dinge:
- teilweise wäre noch ein let bzw. const vor den Variablen sinnvoll um keine globalen Variablen zu haben (dafür wäre es auch sinnvoll alles in ein Objekt zu packen und so zu kapseln)
- um clickedRow.children zu durchlaufen ist imho forEach einfacher/besser lesbar als deine for-Konstruktion
- allCellsOfClickedRow[i].classList.add('activeTableCell') für jede Zelle ist unnötig: verpasse dem jeweiligen tr eine Klasse, die einzelnen Zellen darin kannst du dann per Nachfolgeselektor ansprechen
- löschen lassen sich die Zeilen auch nicht per Tastatur: das läuft über einen click-Handler auf der letzten Spalte - die enthält aber kein interaktives Element und ist damit per Tastatur nicht erreichbar (da gehört ein Button hin)

[Forumsgast]

Nur mal so als Hinweis:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
  <title>Document</title>
</head>
<body class=container>
  <h1>Test</h1>
  <input type="text" tabindex=1 value=test>
  <table>
    <thead>
      <tr>
        <td>
          Art
        </td>
        <td>
          Bezeichnung
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td tabindex=1>
          Obst
        </td>
        <td tabindex=1>
          Kirsche
        </td>
      </tr>
      <tr>
        <td tabindex=1>
          Gemüse
        </td>
        <td tabindex=1>
          Weißkohl
        </td>
      </tr>
    </tbody>  
  </table>
  <script>
    document.querySelectorAll('tbody td').forEach(
      el => el.addEventListener('focus', function(){
        this.contentEditable=true;
        const range = document.createRange()
        const selection = window.getSelection()
        range.setStart(this, this.childNodes.length     )        
        range.collapse(true)
        selection.removeAllRanges();
        selection.addRange(range)
      })  
    )
  </script>
</body>
</html>

[Forumsgast]

@ tk danke für deine Hilfe und Tips
@ kaminbausatz Ich weiss dass es verschiedene Frameworks gibt, die alles viel effizienter erledigen, mir geht es aber im Moment jedoch einzig und allein um den Lerneffekt


LG

Midget

[Forumsgast]

@ tk danke für deine Hilfe und Tips
@ kaminbausatz Ich weiss dass es verschiedene Frameworks gibt, die alles viel effizienter erledigen, mir geht es aber im Moment jedoch einzig und allein um den Lerneffekt


LG

Midget

Hier ging es nicht um das Framework, sondern die Aussage, dass sich das Editieren per Tastatur in Tabellen schwierig gestaltet..