Fügen Sie mehrere Zeilen der Tabelle dynamisch in Javascript

Ich möchte in der Lage sein, um hinzuzufügen, wie viele Zeilen, wie ich eine Tabelle so, dass es dynamisch wächst und schrumpft. (Jetzt bin ich nur die Konzentration auf ihm wächst) Dieser code funktioniert Super, wenn ich wollen, um eine Zeile hinzuzufügen, um den unteren Rand der Tabelle, aber wenn ich will, um eine Zeile hinzuzufügen, in der Mitte der Tabelle, es ist etwas in meinem code nicht richtig ist, (und ich bekomme eine Fehlermeldung).

zB.

Titel | Titel | Titel |
1....| 1.... | 1.... | addBtn

wenige Minuten später

Titel | Titel | Titel |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- ich auf diese
3....| 3....| 3....| addBtn
4....| 4....| 4....| addBtn

immer...

Titel | Titel | Titel |
1....| 1....| 1....| addBtn
2....| 2....| 2....| addBtn <- ich klickte auf dieser
3....| 3....| 3....| addBtn <- er erstellt diese Zeile
4....| 4....| 4....| addBtn <- diese Zeile genutzt, um im Platz 3
5....| 5....| 5....| addBtn <- diese Zeile genutzt, um im Platz 4

Ich bin neu hier, aber ich habe einen Tag versuchen, damit es funktioniert; auch die clone-Funktion, die scheint nicht zu funktionieren für mich. Ich habe auch nie geklappt mit input-arrays, so ist dies nicht richtig, dann, was würden Sie empfehlen?

<script>
function displayResult(j)
{
    if (j <= document.getElementById("purchaseItems").rows.length) {
        for (var i= document.getElementById("purchaseItems").rows.length; i>j ;i--) {
            var elName = "addRow[" + i + "]";
            var newName = "addRow[" + (i+1) + "]";
            var newClick = "displayResult(" + (i+1) + ")";
            var modEl = document.getElementsByName(elName);

            modEl.setAttribute("onclick", newClick);
            document.getElementsByName("addRow[" + i + "]").setAttribute('name', "addRow[" + (i+1) + "]");
        }
    }
    var table=document.getElementById("purchaseItems");
    var row=table.insertRow(j);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    var cell3=row.insertCell(2);
    var cell4=row.insertCell(3);
    var cell5=row.insertCell(4);
    cell1.innerHTML="<input type=text class='tbDescription' name='description[]' required/>";
    cell2.innerHTML="<input type=text name='itemPrice[]' required />";
    cell3.innerHTML="<input type=text name='itemquantity[]' required />";
    cell4.innerHTML="<input type='text' name='lineTotal[]' readonly />";
    cell5.innerHTML="<input type='button' name='addRow["+ j + "]' class='add' onclick=\"displayResult(" + (j+1) + ")\" value='+' />";
}

Hier ist der HTML -

<table id= "purchaseItems" name="purchaseItems" align="center">
<tr>
    <th>Description</th>
    <th>price</th>
    <th>quantity</th>
    <th>Line Total</th>
    <td>&nbsp;</td>
</tr>
<tr>
    <td><input type="text" name="description[]" class="tbDescription" required /></td>
    <td><input type="text" name="price[]" required /></td>
    <td><input type="text" name="quantity[]" required /></td>
    <td><input type="text" name="lineTotal[]" readonly /></td>
    <td><input type="button" name="addRow[1]" onclick="displayResult(2)" class="add" value='+' /></td>
</tr>

InformationsquelleAutor user2626643 | 2013-07-29

2

So bekam ich etwas Hilfe von jemandem bei der Arbeit. Hier ist, was wir bekommen haben:
```
$(document).on('click', '#purchaseItems .add', function(){

        var row = $(this).closest('tr');
        var clone = row.clone();

        //clear the values
        var tr = clone.closest('tr');
        tr.find('input[type=text]').val('');

        $(this).closest('tr').after(clone);

    });
```
ist hier ein live-Beispiel aus meinem erste Geige.

http://jsfiddle.net/paulscicluna/h5DV5/

schlägt vor: verwenden Sie die 2 Argumente zu Klonen, wenn Sie kopieren müssen (oder deep-copy) die Daten-und Ereignis-Handler, die möglicherweise im Zusammenhang mit der geklonten Elemente. Siehe api.jquery.com/clone

InformationsquelleAutor user2626643

Ich Stimme jQuery ist dein Freund für sowas. Sehen Sie diese fiddle für ein Beispiel

viiiiiel weniger code habe ich es geschafft die JS nach unten, so etwas wie dieses:

var table = $("table"),
button = $("#clicktoadd");

 button.on('click', function() {
     table.append("<tr><td>New Data</td><td>New Data</td>");
   });

^^ cheers

edit:

Ich denke, das ist, was Sie brauchen:

var table = $("table");

$(document).on('click', 'a', function() {
   //some randomness to distinguish rows
   var a = Math.round( Math.random() * 10 ), b = Math.round( Math.random() * 10 );
   $(this).parents('tr').after("<tr><td>" + a + "</td><td>" + b + "</td><td><a           class='clicktoadd' href='#'>Click to Add</a></td>");
});

es hat eine etwas andere "html-Einstellungen" habe ich aktualisiert und die Geige oben, als auch.

Hi jdog. danke für die Antwort. Schön schnell und einfach und gehen in mein arsenal für die Zukunft. Allerdings, was ich brauchte, war etwas anders. Sie unten sehen können 🙂

InformationsquelleAutor jdog

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.