Develop Reference

How to add Dynamically table row including text boxes and select box with Different Ids

I have developed a table. It has a facility to generate a table row dynamically when a button is pressed. But I am unable to add a select box when adding a new row. How can I do this? The HTML and JS codes are listed below.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.id = 'text' + rowCount + '';
element1.name = "chkbox[]";
cell1.appendChild(element1);
//var cell2 = row.insertCell(1);
//cell2.innerHTML = rowCount + 1;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.className = "form-control";
element2.title = "Item-name";
element2.id = 'item-name' + rowCount + '';
element2.name = "item-name[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.className = "form-control";
element3.title = "Item-name";
element3.id = 'qty' + rowCount + '';
element3.name = "qty[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.className = "form-control";
element4.title = "Item-name";
element4.id = 'unit-price-' + rowCount + '';
element4.name = "unit-price[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.className = "form-control";
element5.title = "Item-name";
element5.id = 'toatal-' + rowCount + '';
element5.name = "total-[]";
cell5.appendChild(element5);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 3) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
<table class="table table-striped table-hover" style="background-color:white; text-align: center;" id="item-table">
<tr>
<td></td>
<td> </td>
<td></td>
<td><input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table')" class="btn-success form-control" /></td>
<td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
</tr>
<tr>
<th></th>
<th style="text-align: center">Item Name</th>
<th style="text-align: center">Quantity</th>
<th style="text-align: center">unit Price</th>
<th style="text-align: center">total</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td class="col-md-4">
<select name="selected_item[]" class="form-control">
<?php
include ('../svr/connection.php');
$sql = "SELECT * FROM User";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
echo '<option value=' . $row['user_name'] . '>' . $row['user_name'] . '</option>';
}
?>
</select>
</td>
<td><input type="text" name="it_re_qty[]" class="form-control"></td>
<td><input type="text" id="y" name="unit_price[]" class="form-control"></td>
<td><input type="text" id="it_re_qty" name="total[]" class="form-control col-md-1"></td>
<!--<td> <input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table')" class="btn-success form-control"/></td>
<td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
-->
</tr>
</table>

But I am unable to add a select box when adding a new row. How can I do this?
The select list can be cloned using Node.cloneNode(). And the original select list can be located with a selector using Element.querySelector(), like in the code below:
var selectList = table.rows[2].querySelector('select');
var element2 = selectList.cloneNode(true); //pass true for deep clone (to include options)
//set the id property
element2.id = 'selected-item'+rowCount;
cell2.appendChild(element2);
See a demonstration of this in the snippet below.
As others have mentioned, jQuery's .clone() method works similarly. Since jQuery was tagged in the original post, this could be used as well, using .attr() to set the id attribute and .appendTo() to add the select list to a cell in the new table row:
var selectList = $('select.form-control');
var element2 = selectList.clone(); //performs deep clone by default
element2.attr('id','selected-item'+rowCount);
element2.appendTo(cell2);
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.id = 'text' + rowCount + '';
element1.name = "chkbox[]";
cell1.appendChild(element1);
//var cell2 = row.insertCell(1);
//cell2.innerHTML = rowCount + 1;
var cell2 = row.insertCell(1);
var selectList = table.rows[2].querySelector('select');
/*var element2 = document.createElement("select");
element2.className = "form-control";
element2.id = 'item-name' + rowCount + '';
element2.name = "selected_item[]";
var existingOptions = table.rows[0].querySelector('option');
existingOptions.each(function(option) {
element2.appendchild(option.cloneNode(true));
});*/
var element2 = selectList.cloneNode(true);
element2.id = 'selected-item'+rowCount;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.className = "form-control";
element3.title = "Item-name";
element3.id = 'qty' + rowCount + '';
element3.name = "qty[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.className = "form-control";
element4.title = "Item-name";
element4.id = 'unit-price-' + rowCount + '';
element4.name = "unit-price[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.className = "form-control";
element5.title = "Item-name";
element5.id = 'toatal-' + rowCount + '';
element5.name = "total-[]";
cell5.appendChild(element5);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 3) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
<table class="table table-striped table-hover" style="background-color:white; text-align: center;" id="item-table">
<tr>
<td></td>
<td> </td>
<td></td>
<td><input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table');" class="btn-success form-control" /></td>
<td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
</tr>
<tr>
<th></th>
<th style="text-align: center">Item Name</th>
<th style="text-align: center">Quantity</th>
<th style="text-align: center">unit Price</th>
<th style="text-align: center">total</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td class="col-md-4">
<select name="selected_item[]" class="form-control">
<option></option>
<option value="laurie">Laurie</option>
<option value="sam">Sam</option>
</select>
</td>
<td><input type="text" name="it_re_qty[]" class="form-control"></td>
<td><input type="text" id="y" name="unit_price[]" class="form-control"></td>
<td><input type="text" id="it_re_qty" name="total[]" class="form-control col-md-1"></td>
<!--<td> <input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table');idincrement;" class="btn-success form-control"/></td>
<td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
-->
</tr>
</table>

Not sure exactly what you mean, but if you're talking about the 'Item Name' Column, try changing:
var element2 = document.createElement("input");
to
var element2 = document.createElement("select");

Insert New Table row with javascript

I'm trying to add a new Table row with an input type file, after each time someone chooses a file to upload.
The problem is, the input type is not inserted into the new row;
The markup language:
<table id = "images">
<tr>
<td>Title: </td><td><input type="text" name="title" size="51" required><td>
<tr>
<tr>
<td>Description: </td><td><textarea type="text" name="story" rows="10" cols="60"></textarea><td>
<tr>
<tr>
<td>Author: </td><td><input type="text" name="auth" size="51" required></textarea><td>
<tr>
<tr>
<td>Image: </td><td><input type="file" name="image[]" size="20" accept="image/jpeg, image/png" required onChange="addRow('images')"></input><td>
<tr>
</table>
The JS:
<SCRIPT language="javascript">
addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.getElementsByTagName("tr").length;
var row = table.insertRow(rowCount-2);
var cell1 = row.insertCell(0);
cell1.innerHTML = "Images";
var cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "file";
element2.name = "image[]";
document.getElementsByName("image[]").lastChild.setAttribute("onChange", "addRow('images')");
cell3.appendChild(
}
</SCRIPT>
The error I'm seeing is:
Uncaught TypeError: Cannot call method 'setAttribute' of undefined
Any help greatly appreciated.
Peter

function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.getElementsByTagName("tr").length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.innerHTML = "Image:";
var cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "file";
element2.name = "image[]";
cell3.appendChild(element2);
element2.setAttribute("onChange", "addRow('images')");
}
here's a working fiddle:
http://jsfiddle.net/C3GRN/1/

JAVASCRIPT
document.getElementById('images').innerHTML+="<tr><td>blah-2</td></tr>";
JQUERY
$('#images tr:last').after('<tr><td>blah-2</td></tr>');

$('#images tr:first').after('<tr><td><input type="text" ></td></tr>');

How do I find the sum of the values entered in certain fields that were created dynamically using Javascript?

I've written code that creates a form displayed as a table on a HTML page. I've written Javascript to allow the user to add rows or delete selected rows. The add and delete functionalities work. But I want the final column of a row to display the sum of the previous three values, and that is just not happening.
Here's the HTML code:
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="350px" border="1">
<form name="f1" id="f1">
<tr>
<td><b> Select </b></td>
<td><b> S.No. </b></td>
<td><b> Subject </b></td>
<td><b> Mark 1 </b></td>
<td><b> Mark 2 </b></td>
<td><b> Mark 3 </b></td>
<td><b> Total </b></td>
</tr>
<tr>
<td> <input type="checkbox" name="chk"/></td>
<td> 1 </td>
<td> <input type="text" name="subject" /> </td>
<td> <input type="text" name="mark" /></td>
<td> <input type="text" name="marka" /></td>
<td> <input type="text" name="markb" /></td>
<td> <input type="text" name="total" /></td>
</tr>
</form>
</table>
<input type=button value="Sum" onclick=sum('dataTable') />
And the Javascript that I've been using:
<script language="javascript">
var k=0;
function addRow(tableID) {
k++;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chk"+k;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "subject"+k;
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "mark"+k;
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "marka"+k;
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "markb"+k;
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "total"+k;
cell7.appendChild(element6);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
for(var j=1; j<rowCount; j++)
{var mytable = document.getElementById(tableID);
mytable.rows[j].cells[1].innerHTML = j;
}
}
function sum(tableID)
{ var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1;i<rowCount;i++)
{
table.rows[i].cells[6].name.value=table.rows[i].cells[3].name.value + table.rows[i].cells[4].name.value + table.rows[i].cells[5].name.value;
}
}
</script>
Also, the first row doesn't get deleted in Firefox. That works only in Internet Explorer facepalm.
What should I do?

Here's a new and improved Sum function that should get you pointed in the right direction:
sum = function()
{
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for(var i=1;i<rowCount;i++)
{
table.rows[i].cells[6].childNodes[0].value =
parseInt(table.rows[i].cells[3].childNodes[0].value) +
parseInt(table.rows[i].cells[4].childNodes[0].value) +
parseInt(table.rows[i].cells[5].childNodes[0].value);
}
}
To make this work you'll also need to remove the spaces preceding your input fields.
Here's a JSFiddle that incorporates all of it. JSFiddle
Hope it suits your needs.

How to insert row with attributes using table.insertRow?

I have a html table and insert a new row with table.insertRow(), but the new row doesn't have any attributes or formatting applied. How can I add a row to the table with row formatting?
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="100%" align="center">
<TR align="center" border="1">
<TH></TH>
<TH>ID </TH>
<TH>Name</TH>
<TH>Status</TH>
</TR>
<TR align="center">
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" value="Submission 1" /> </TD>
<TD>Working version</TD>
</TR>
</TABLE>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>

I found it's better to use jquery to add rows to tables
$('#dataTable tr:last').after('<TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD>'+ rowCount + '</TD><TD> <INPUT type="text" value="Submission 1" /> </TD><TD>Working version</TD></TR>');

To set the class name for a tablerow you simply need to edit the className attribute as done below
<script>
var table = document.getElementById("tableID");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
row.className = "rowdiv";
</script>

Considering insertRow() is usually where you put the index, and var row = table.insertRow(rowCount); is used here, how can you move it to specific part of the table?

How can I add/delete a table row using JavaScript?

I'm looking for a simple, effective technique for adding or deleting a row in a html table using JavaScript. (Without using jQuery)

var theTable = document.getElementById("theTable");
theTable.deleteRow(0); //0 being first row.

I wrote this a month ago...Its not the best way
<html>
<head>
<title>
Crap work
</title>
<script type="text/javascript">
function add_row()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<span onClick="save(this)">Save</span>';
}
function save(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML=elTableCells[0].firstChild.value;
elTableCells[1].innerHTML=elTableCells[1].firstChild.value;
elTableCells[2].setAttribute("style", "display:block;");
elTableCells[3].setAttribute("style", "display:none;");
}
function edit(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML='<input type="text" value="'+elTableCells[0].innerHTML+'">';
elTableCells[1].innerHTML='<input type="text" value="'+elTableCells[1].innerHTML+'">';
elTableCells[2].setAttribute("style", "display:none;");
elTableCells[3].setAttribute("style", "display:block;");
}
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
</script>
</head>
<body >
<div id="display">
<table id='table'>
<tr id='id'>
<td>
Piemesons
</td>
<td>
23
</td>
<td >
<span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>
</td>
<td style="display:none;">
<span onClick="save(this)">Save</span>
</td>
</tr>
</table>
<input type="button" value="Add new row" onClick="add_row();" />
</div>
</body>