Increment my input text id when table row is cloned using Javascript

Question

I am having a table it contains only one row. Row has a lot of elements like textboxs and buttons. When I click the button the table row will be cloned using append() function. My problem is when I click the button I want to increment the textbox and button id. How can I do this?

Example HTML:

<tr id="items:1">
    <td id="id">
        <input type="text" id="price:1" name="price" value="" size="6" readonly="readonly" />
    </td>
    <td id="id">
        <input type="text" id="quantity:1" name="quantity" size="10" align="middle" onblur="totalprice(this)" />
    </td>
    <td id="id">
        <input type="text" id="total:1" name="total" size="10" value="0" readonly="readonly" align="middle" />
    </td>
    <td id="id">
        <input type="button" onclick="cloneRow()" id="button:1" value="ADD" />
    </td>
</tr>

Example JavaScript:

function cloneRow() {
    var row = document.getElementById("items:1");
    var table = document.getElementById("particulars");
    var clone = row.cloneNode(true);
    var rowId = "items:" + a.toString();
    clone.id = rowId;
    var tabledataid = document.getElementById("id");
    var inputtext = tabledataid.getElementsByTagName("input");
    var inputtextid = inputtext[a];
    var changeInputTextid = "price:" + b.toString();
    inputtextid.id = changeInputTextid;
    alert(changeInputTextid);
    table.appendChild(clone);
    a++;
}

use the [Increment operator](http://stackoverflow.com/questions/14320320/increasing-understanding-of-javascript-increment-operator) — php_nub_qq, Jun 14 '13 at 14:36

NullPointerException · Accepted Answer · 2013-06-14T15:45:10.237

0

A fiddle

Create a function to add rows and just use the indexes of text boxes and columns correctly

function insertRow() {
var x = document.getElementById('ttable');
var new_row = x.rows[0].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;

var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
x.appendChild(new_row);
}

edited Jun 14 '13 at 15:45

answered Jun 14 '13 at 14:45

NullPointerException

3,732
5
28
62

You realise you get a duplicate row `1` on the first click? Also: why not use `rowIndex + 1` (or other suitable number), rather than searching for the number of rows? – David Thomas Jun 14 '13 at 14:52
@David i want to increment my textbox id can you tell me how to do using rowIndex+1 – Arut Jun 14 '13 at 15:02
@DavidThomas that's just the text if you check the id it is incrementing corectly. I had corrected the fiddle – NullPointerException Jun 14 '13 at 15:45
@Nullpointer you are right.i want to change from the original row id is possible. – Arut Jun 14 '13 at 18:46

Increment my input text id when table row is cloned using Javascript

1 Answers1