JavaScript Tabelle Manipulation

Ich habe eine Tabelle mit einer Spalte und über zehn Zeilen. Die erste Spalte hat in den Zeilen mit text als Zeilen-Header "header 1", "überschrift 2". Die zweite Spalte enthält die Felder für die Benutzer zur Eingabe von Daten (Textfelder und Checkboxen).

Ich will einen button oben mit der Aufschrift "Hinzufügen...", und erstellen Sie eine Dritte Spalte mit der gleichen Felder wie in der ersten Spalte. Wenn der Benutzer klickt es wieder, es wird, erstellen Sie eine weitere leere Spalte mit Feldern (wie in der zweiten Spalte).

Kennt jemand eine effektive Möglichkeit, das DOM zu verändern, dies zu erreichen?

Ich experimentiere mit div's und TABLES aber ich bin an meinem Dritten Tag, dies zu tun, und es fühlt sich schwerer, als es sein sollte.

  • Hinweise zur Verbesserung Ihrer post: entfernen Ajax aus dem Titel, es spielt keine Rolle Ihre Aufgabe (wie Sie setzen Sie es). Und Sie schreiben: "mit einer Spalte" dann "Die zweite Spalte"...
  • heh, ich bereits bearbeitet ajax aus den tags und Total verpasst es in den Titel. Korrigiert.
InformationsquelleAutor | 2008-10-03
  1. 3

    Amüsante übung. Dank AviewAnew den Tipp, ich könnte es tun.

    function AddColumn(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;
  //Take care of header
  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var newcell = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(newcell);
  //Add the remainder of the column
  for(var i = 1; i < rowNb; i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(newcell);
  }
}

    mit folgenden HTML-Code:

    <input type="button" id="BSO" value="Add" onclick="javascript:AddColumn('TSO')"/>
<table border="1" id="TSO">
<thead>
<tr><th>Fields</th><th>Data</th></tr>
</thead>
<tbody>
<tr><td>Doh</td><td>10</td></tr>
<tr><td>Toh</td><td>20</td></tr>
<tr><td>Foo</td><td>30</td></tr>
<tr><td>Bar</td><td>42</td></tr>
<tr><td>Ga</td><td>50</td></tr>
<tr><td>Bu</td><td>666</td></tr>
<tr><td>Zo</td><td>70</td></tr>
<tr><td>Meu</td><td>80</td></tr>
</tbody>
</table>
    InformationsquelleAutor PhiLho
  2. 2

    Etwas entlang der Linien von

    function(table)
{
  for(var i=0;i<table.rows.length;i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(true);
    table.rows[i].appendChild(newcell);
  }
}
    InformationsquelleAutor Tom Ritter
Schreibe einen Kommentar