Databases
StackOverflow2013
Postsdbo
POIncrement my input text id when table row is cloned using Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIncrement my input text id when table row is cloned using Javascript
    text
    copied!<p>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 <code>append()</code> function. My problem is when I click the button I want to increment the textbox and button id. How can I do this?</p> <p>Example HTML:</p> <pre class="lang-html prettyprint-override"><code>&lt;tr id="items:1"&gt; &lt;td id="id"&gt; &lt;input type="text" id="price:1" name="price" value="" size="6" readonly="readonly" /&gt; &lt;/td&gt; &lt;td id="id"&gt; &lt;input type="text" id="quantity:1" name="quantity" size="10" align="middle" onblur="totalprice(this)" /&gt; &lt;/td&gt; &lt;td id="id"&gt; &lt;input type="text" id="total:1" name="total" size="10" value="0" readonly="readonly" align="middle" /&gt; &lt;/td&gt; &lt;td id="id"&gt; &lt;input type="button" onclick="cloneRow()" id="button:1" value="ADD" /&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>Example JavaScript:</p> <pre class="lang-js prettyprint-override"><code>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++; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload