Aggiungere la riga della tabella con onclick JavaScript

Sto cercando di aggiungere l’esatto stesso elemento qui sotto utilizzando javascript. Ho provato tutte le soluzioni trovate qui, ho anche provato ad eco l’elemento con php echo ma senza fortuna. Non vi è alcuna necessità di modificare i nomi di input, o qualcosa di simile, è sufficiente fare clic su quel pulsante, aggiungere un’altra riga alla tabella, e basta.

Ecco l’elemento:

<tr>
<td><input type="text" name="links"></td>
<td><input type="text" name="keywords"></td> 
<td><input type="text" name="violationtype"></td>   
<td><input type="submit" id="last" class="button" value="Add another line" onclick:"addField();"></td>          
</tr>

Io ci sto per niente, tuttavia, vorrei javascript come ho tenuto il mio sistema, senza alcun riferimento esterno (come jquery), ma a questo punto sono aperto a qualsiasi suggerimento. Ho provato a farlo con il codice riportato di seguito:

function addFields() {
    var number = document.getElementById("last").value;
    var html = '<tr>' +
    '<td><input type="text" name="links"></td>' +
    '<td><input type="text" name="keywords"></td>' +
    '<td><input type="text" name="violationtype"></td>' +
    '<td><input type="submit" id="last" class="button" value="Add another line" name="line" onclick:"addField();"></td>';
    number.appendChild(html);
}

Ma non mi sembra di fare nulla. Presumo che dovrei gestire il codice di sapere quale ingresso è ultimo in un modo migliore rispetto a id="last" ma non ho idea di come farlo.

si dovrebbe avere onclick= non :
A prima vista, onclick:"addField();" dovrebbe essere onclick="addFields();".

OriginaleL’autore Predrag Beocanin | 2013-10-05

3 Replies
  1. 7

    Un lavoro completo, esempio – http://jsfiddle.net/QmHdL/

    Tabella può essere creata come questo

    <table id="myTable">
        <tr>
            <td><input type="text" name="links"></td>
            <td><input type="text" name="keywords"></td>
            <td><input type="text" name="violationtype"></td>
            <td><input type="button" class="button" value="Add another line" onclick="addField();"></td>
        </tr>
    </table>

    Ora, addField deve essere implementato come questo

        function addField (argument) {
            var myTable = document.getElementById("myTable");
            var currentIndex = myTable.rows.length;
            var currentRow = myTable.insertRow(-1);
    
            var linksBox = document.createElement("input");
            linksBox.setAttribute("name", "links" + currentIndex);
    
            var keywordsBox = document.createElement("input");
            keywordsBox.setAttribute("name", "keywords" + currentIndex);
    
            var violationsBox = document.createElement("input");
            violationsBox.setAttribute("name", "violationtype" + currentIndex);
    
            var addRowBox = document.createElement("input");
            addRowBox.setAttribute("type", "button");
            addRowBox.setAttribute("value", "Add another line");
            addRowBox.setAttribute("onclick", "addField();");
            addRowBox.setAttribute("class", "button");
    
            var currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(linksBox);
    
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(keywordsBox);
    
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(violationsBox);
    
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(addRowBox);
        }
    Questo è ciò che dovrebbe essere utilizzato, ma credo che ci si possa eliminare il currentIndex quando si crea un nuovo elemento con lo stesso nome, a meno che non sia l’invio via GET (io non so quale sarebbe il risultato, onestamente). Ma il $_POST globale è un array che si amplierà con delta se ripetuti ingressi vengono inviati.
    È vero. Ma non è sicuro, come si sta attuando. 🙁
    molto male, presumo, considerando che ho bisogno di foreach all’interno del foreach all’interno del foreach per analizzare tutti i dati, ma questo funziona, grazie! Potrei aggiungere una classe di questi dati? Come linksBox.setAttribute("class","standard"); aggiunto sotto la prima setatrribute linea?
    Yup. È possibile aggiungere. 🙂
    Malvagi =) ho intenzione di usare il clone versione, in questo caso specifico, tuttavia, ho bisogno di farlo in un luogo diverso per generare il codice html, quindi questo è molto utile. Grazie ancora!

    OriginaleL’autore thefourtheye

  2. 8

    Si può ottenere la stessa cosa utilizzando il seguente

    HTML:

    <table id="tbl">
        <tr>
            <td><input type="text" name="links" /></td>
            <td><input type="text" name="keywords" /></td> 
            <td><input type="text" name="violationtype" /></td>   
            <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>          
        </tr>
    </table>

    JS:

    function addField(n)
    {
        var tr = n.parentNode.parentNode.cloneNode(true);
        document.getElementById('tbl').appendChild(tr);
    }

    Inoltre, rimuovere la id da input, perché un ID deve essere unico e ricorda che stai usando nomi uguali per tutti i tuoi ingressi, qui, così, i nomi dovrebbero essere nominato come links[] , keywords[] e violationtype[] di utilizzare come matrice, ma non è sicuro di quello che è il tuo caso.

    Esempio.

    questo è incredibile o.o 4 righe di codice e funzionano! L’ho aggiunto e funziona perfettamente

    OriginaleL’autore The Alpha

  3. 1

    Ci sono un paio di problemi qui..

    Il onclick: dovrebbe essere onclick=

    Allora si sta aggiungendo l’elemento con id ‘ultimo’, che è un elemento di input – si può aggiungere a che. Dare alla vostra tavola un ID e aggiungere a che, invece, se si desidera aggiungere una riga, altrimenti creare qualche altro elemento div/span con ID e aggiungere che se il whle tabella è quello di bee creato da zero

    Allora non è possibile aggiungere codice HTML che è necessario creare un nuovo elemento riga di tabella e aggiungere che o utilizzare [element].innerHTML += [your new row HTML].

    OriginaleL’autore WindsorAndy

Lascia un commento