Databases
StackOverflow2013
Postsdbo
POAdd multiple rows to table dynamically in Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd multiple rows to table dynamically in Javascript
    text
    copied!<p>I want to be able to add as many rows as I like to a table so that it dynamically grows and shrinks. (Right now I'm just concentrating on it growing) This code works great when I want to add a row to the bottom of the table, however when I want to add a row in the middle of the table, there is something in my code not quite right, (and I get an error).</p> <p>eg.</p> <p>title | title | title | <br> 1....| 1.... | 1.... | addBtn <br></p> <p>a few mins later</p> <p>title | title | title |<br> 1....| 1....| 1....| addBtn <br> 2....| 2....| 2....| addBtn &lt;- i click on this <br> 3....| 3....| 3....| addBtn <br> 4....| 4....| 4....| addBtn</p> <p>becoming...</p> <p>title | title | title | <br> 1....| 1....| 1....| addBtn <br> 2....| 2....| 2....| addBtn &lt;- i clicked on this <br> 3....| 3....| 3....| addBtn &lt;- it created this row <br> 4....| 4....| 4....| addBtn &lt;- this row used to be in place 3 <br> 5....| 5....| 5....| addBtn &lt;- this row used to be in place 4 <br></p> <p>I am new to this, but I have spent a day trying to get this working; also looking at the clone feature which doesn't seem to work either for me. I've also never worked with input arrays so if this is not correct then what would you recommend?</p> <pre><code>&lt;script&gt; function displayResult(j) { if (j &lt;= document.getElementById("purchaseItems").rows.length) { for (var i= document.getElementById("purchaseItems").rows.length; i&gt;j ;i--) { var elName = "addRow[" + i + "]"; var newName = "addRow[" + (i+1) + "]"; var newClick = "displayResult(" + (i+1) + ")"; var modEl = document.getElementsByName(elName); modEl.setAttribute("onclick", newClick); document.getElementsByName("addRow[" + i + "]").setAttribute('name', "addRow[" + (i+1) + "]"); } } var table=document.getElementById("purchaseItems"); var row=table.insertRow(j); var cell1=row.insertCell(0); var cell2=row.insertCell(1); var cell3=row.insertCell(2); var cell4=row.insertCell(3); var cell5=row.insertCell(4); cell1.innerHTML="&lt;input type=text class='tbDescription' name='description[]' required/&gt;"; cell2.innerHTML="&lt;input type=text name='itemPrice[]' required /&gt;"; cell3.innerHTML="&lt;input type=text name='itemquantity[]' required /&gt;"; cell4.innerHTML="&lt;input type='text' name='lineTotal[]' readonly /&gt;"; cell5.innerHTML="&lt;input type='button' name='addRow["+ j + "]' class='add' onclick=\"displayResult(" + (j+1) + ")\" value='+' /&gt;"; } </code></pre> <p></p> <p>Here is the HTML</p> <pre><code>&lt;table id= "purchaseItems" name="purchaseItems" align="center"&gt; &lt;tr&gt; &lt;th&gt;Description&lt;/th&gt; &lt;th&gt;price&lt;/th&gt; &lt;th&gt;quantity&lt;/th&gt; &lt;th&gt;Line Total&lt;/th&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="text" name="description[]" class="tbDescription" required /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="price[]" required /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="quantity[]" required /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="lineTotal[]" readonly /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="button" name="addRow[1]" onclick="displayResult(2)" class="add" value='+' /&gt;&lt;/td&gt; &lt;/tr&gt; </code></pre> <p></p>
 

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