Note that there are some explanatory texts on larger screens.

plurals
  1. POIncrement my input text id when table row is cloned using Javascript
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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