Rolf B: bei cloneNode eine ID hochzählen lassen

Beitrag lesen

Hallo maebinger,

ich brauche eine Möglichkeit das in meinem PHP Skript eine Tabellenzeile hinzufügt.

Was denn jetzt? Im PHP oder mit JavaScript? Wenn Du das mit PHP machen willst, musst Du den Einfüge-Auftrag per POST an den Server schicken, der speichert dann eventuelle Änderungen in den bestehenden Zeilen, baut das HTML mit einer weiteren Zeile auf und gibt es wieder aus.

Die ID's benötige ich weil ein weiteres "Skript" eine eindeutige ID benötigt um hier ne Ausgabe zu starten. Ich hab halt an der ID noch ein Skript das quasi ne DB Suchfunktion ist (Dropdown).

In dem Fall muss die ID aber in der DB existieren, und das heißt: Dein Server muss die ID kennen. Damit ist eine Suche erst dann sinnvoll, wenn der Inhalt einer neuen Zeile einmal gespeichert worden ist, und die ID muss, denke ich, die ID der Person in deiner DB sein. Eine ID-Vergabe aus JavaScript heraus scheint mir nicht zielführend. Du könntest die Personen-ID im PHP als data-Attribut an das tr-Element der jeweiligen Zeile setzen.

  <tr data-id="4711">
  </tr>

In dem Script, das die Suche durchführt (wenn es denn JavaScript ist), kannst Du das tr-Element aufsuchen und mit trElement.dataset.id auf das data-id Attribut zugreifen.

das die Clone Funktion Chaos stiftet ist mir nicht bewusst :) Inwiefern soll ich das skizzieren?

Na, ich skizziere mal für Dich. Deine HTML Struktur ist: (das </input>-Tag habe ich weggelassen, das gibt es nicht, <input> ist ein Element ohne Ende-Tag)

<form>
  <div id="new_passage">
    <table name="cloneTable">
      <tbody>
        <tr>...</tr>
      </tbody>
    </table>
********************* hier fehlt ein </div>, würde ich vermuten
    <table>
      <tbody>
        <tr>
          <td>
            <div>
              <input value="weitere Zeile" onclick="...">
            </div>
          </td>
        </tr>
********************* hier fehlt ein </tbody>
    </table>
</form>

Dein Clone-Button nimmt das erste Kind von new_passage, also die cloneTable, und fügt es vor dem "weitere Zeile" Button ein. Das Ergebnis ist (die neuen Zeilen habe ich vorn mit # markiert):

<form>
  <div id="new_passage">
    <table name="cloneTable">
      <tbody>
        <tr>...</tr>
      </tbody>
    </table>
    <table>
      <tbody>
        <tr>
          <td>
            <div>
#             <table name="cloneTable">
#               <tbody>
#                 <tr>...</tr>
#               </tbody>
#             </table>
              <input value="weitere Zeile">
            </div>
          </td>
        </tr>
    </table>
</form>

Und das willst Du wohl ganz bestimmt nicht. Eine bessere Struktur wäre:

<form>
  <div id="new_passage">
    <table>
      <tbody>
        <tr id="clone_source">...</tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"></td>
          <td><button type="button" id="clone_button">Weitere Zeile"</button></td>
        </tr>
      </tfoot>
    </table>
</form>

<script>
   const cloneSource = document.getElementById("clone_source");
   document.getElementById("clone_button")
           .addEventListener("click", function(event) {
      const clone_me = cloneSource.cloneNode(true);
      cloneSource.parentElement.append(clone_me);
   });
</script>

Damit hast Du

  • kein onclick mehr im HTML, sondern ''unobtrusive JavaScript''
  • eine bessere HTML Struktur, weil Du nur eine Table hast und nicht die Spaltenbreiten zweier Tables synchron halten musst
  • kein Gefummel mit Margins, damit der Button halbwegs unter der letzten Spalte steht
  • lediglich den Klon einer Zeile, und nicht einer ganzen Table

Was es mit deiner divitis auf sich hat, kann ich nicht beurteilen, aber jedes "Hüll-div" ist erstmal eins zu viel und muss seine Existenz rechtfertigen. Ich kenne deine Seite nicht und muss diese Beurteilung deshalb Dir überlassen. Grundsätzlich kannst Du aber auch einer table eine id geben, du kannst Tables und td-Elemente mit Farben und Rändern versehen - dafür brauchst Du keine divs. Bei jedem div, das Du einbaust, musst Du aufpassen, wo Du es wieder schließt. In deinem HTML hast Du das new_passage-div jedenfalls nicht geschlossen.

Ein weiterer Hinweis: In deinem Code steht:

   onclick=\"javascript:clone_this(this, 'new_passage');\" 

und das riecht danach, dass Du im PHP dein HTML mit echo ausgibst. Tu das nicht, du siehst ja genau an dieser Stelle das Problem: Du escapest Dich irgendwann zu Tode. Die korrekte Lösung ist: Schließe den PHP-Modus mit ?>, schreib das benötigte HTML hin und beginne danach mit <?php den PHP Modus neu. Wenn Du innerhalb des HTML Blocks eine PHP Variable brauchst, verwende <?= ... ?>. Wenn Du einen brauchbaren Editor hast, erkennt der das und besorgt Dir sowohl für PHP wie auch für HTML ein ordentliches Syntax-Highlighting und ggf. auch Code-Folding (ausblenden von Unterstrukturen).

Rolf

--
sumpsi - posui - obstruxi