6

I am trying to make a table containing several rows, each with a button in the last cell that creates a copy of the row.

All the other cells contains an input (text). The content (value) of the inputs that are added must be the same as the one above (the one they are copies of).

The copies cannot be copied however!

The inputs must have a unique name something like this:
1-1-name
1-1-age
1-1-country
1-1-email

and if this row is copied, the copied inputs must have names like this
1-2-name
1-2-age
1-2-country
1-2-email

The next one with 3 instead of 2, and so on.

The problem with this, I guess, is that I must do this without JQuery. I can only use Javascript. Is this even possible?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Levi
  • 661
  • 7
  • 26
  • 1
    Duplicate of this: http://stackoverflow.com/questions/1728284/create-clone-of-table-row-and-append-to-table-in-javascript – Cerbrus Dec 07 '12 at 13:39
  • This is not really a duplicate, because I want the copy to appear after the original, and not at the end of the table. – Levi Dec 07 '12 at 13:50
  • Does it matter if the ID's aren't sorted, then? – Cerbrus Dec 07 '12 at 14:23
  • No, this doesn't matter. The important thing is that they appear after the one that was clicked. ;) – Levi Dec 07 '12 at 15:00

2 Answers2

4

Take a look at this fiddle. Here is a pure js (no-jQuery) way to duplicate a table row and increment it's ID:

var idInit;
var table = document.getElementById('theTable');
    table.addEventListener('click', duplicateRow);  // Make the table listen to "Click" events

function duplicateRow(e){
    if(e.target.type == "button"){ // "If a button was clicked"
        var row = e.target.parentElement.parentElement; // Get the row
        var newRow = row.cloneNode(true); // Clone the row

        incrementId(newRow); // Increment the row's ID
        var cells = newRow.cells;
        for(var i = 0; i < cells.length; i++){
            incrementId(cells[i]); // Increment the cells' IDs
        }
        insertAfter(row, newRow); // Insert the row at the right position
        idInit++;
    }
}

function incrementId(elem){
    idParts = elem.id.split('-'); // Cut up the element's ID to get the second part.
    idInit ? idParts[1] = idInit + 1 : idInit = idParts[1]++;  // Increment the ID, and set a temp variable to keep track of the id's.
    elem.id = idParts.join('-'); // Set the new id to the element.
}

function insertAfter(after, newNode){
    after.parentNode.insertBefore(newNode, after.nextSibling);
}​

<table id="theTable">
    <tr id="1-1">
        <td id="1-1-name"><input type="text"/></td>
        <td id="1-1-age"><input type="text"/></td>
        <td id="1-1-country"><input type="text"/></td>
        <td id="1-1-email"><input type="text"/></td>
        <td id="1-1-button"><input type="button" value="Copy"/></td>
    </tr>
</table>​

Edit: Updated to insert the new row after the clicked one. Now with buttons and inputs!

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • This wouldn't work on my work PC (using an old version of IE). So I made line three into a comment: `//table.addEventListener('click', duplicateRow);` And I added this to the button input: `onClick="duplicateRow(event);"` – Levi Dec 10 '12 at 09:03
  • I'd suggest adding that to the table instead, then. You'd generally want as little event listeners as possible, for efficiency / memory usage reasons. – Cerbrus Dec 10 '12 at 09:06
0

Yes this is possible, you should create a new table row , then set its innerHTML to the innerHTML of the row above.

jQuery is a JavaScript library, which means it is built with JavaScript functions.

So everything you can do with jQuery, you can do with JavaScript too.

Léon

leonvv
  • 152
  • 4