We Keep Coding

How do I add a new row in a table when I click on a button using Javascript [duplicate]

This question already has answers here:
Adding a table row in jQuery
(42 answers)
Closed 6 years ago.
Hello all I am having a problem with my code. I want to add a new row with the same fields whenever I click on add product. However when I run the code and I click on add product it doesn't work.
Here's the HTML:
<table class="table" id="concierge">
<th>Item Name</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Image</th>
<tr>
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td>
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td>
<td><input type="text" name="description" id="description" style="border:none;"/></td>
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td>
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td>
<td><input type="file" name="image" id="image" style="border:none"></td>
<td><input type="checkbox" name="check" placeholder="Delete"></td>
</tr>
</table>
<input type="button" name="add" value="Add Product" onclick="addRow(concierge)"/>
<input type="button" name="delete" value="Delete Product" onclick="deleteRow(concierge)"/>
and the Script I am using for both Delete and Add:
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 = "text";
element1.name="itemname";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "itemcode";
cell3.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "description";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "quantity";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "price";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "file";
element6.name = "image";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";
element7.name = "check";
}
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);
}
}
Thank you in advance for your help

concierge should be "concierge"
and change cell3 to cell2 for element2
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 = "text";
element1.name="itemname";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "itemcode";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "description";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "quantity";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "price";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "file";
element6.name = "image";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";
element7.name = "check";
}
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);
}
}
<table class="table" id="concierge">
<th>Item Name</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Image</th>
<tr>
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td>
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td>
<td><input type="text" name="description" id="description" style="border:none;"/></td>
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td>
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td>
<td><input type="file" name="image" id="image" style="border:none"></td>
<td><input type="checkbox" name="check" placeholder="Delete"></td>
</tr>
</table>
<input type="button" name="add" value="Add Product" onclick="addRow('concierge')"/>
<input type="button" name="delete" value="Delete Product" onclick="deleteRow('concierge')"/>

UPDATE SQL Server Database Upon Editing and Saving Data From HTML Table

I have an HTML table that imports data from a database. Currently, I have 3 buttons at the bottom. Add Row, Save, and Delete. I have the "Add Row" and "Delete" button working and functioning correctly. So my question is, is there a way that when I click the "Save" button, it automatically updates and saves the data to the database that I am accessing?
HTML/PHP:
<table id="html_master">
<thead>
<tr>
<td>MR_ID</td>
<td>MR_Name</td>
<td>Buyer_ID</td>
<td>MR_POC_N</td>
<td>MR_POC_E</td>
<td>MR_POC_P</td>
<td>Select</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td id="mr_id"><?php echo intval ($rows['MR_ID'])?></td>
<td id="mr_name"><div contenteditable><?php echo $rows['MR_Name']?></div></td>
<td id="buyer_id"><div contenteditable><?php echo $rows['Buyer_ID']?></div></td>
<td id="poc_n"><div contenteditable><?php echo $rows['MR_POC_N']?></div></td>
<td id="poc_e"><div contenteditable><?php echo $rows['MR_POC_E']?></div></td>
<td id="poc_p"><div contenteditable><?php echo $rows['MR_POC_P']?></div></td>
<td align="center"><input type="checkbox" name="check" value="checked"></td>
</tr>
<?php
}
?>
</tbody>
</table>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
<input type="button" id="save" value="Save">
<input type="button" id="delRow" value="Delete" onclick="deleteRow('html_master')">
</body>
</html>
Javascript:
// ----- Delete Row -----
function deleteRow(html_master){
var tbl=document.getElementById(html_master);
var col=tbl.querySelectorAll('input[type=\"checkbox\"]:checked');
if( col ){
for( var n in col )if( col[ n ].nodeType==1 ){
try {
var tr=col[ n ].parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild( tr );
}catch( err ){
console.warn(err);
continue;
}
}
}
}
// ----- Add Row -----
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";
element7.name="chkbox[]";
cell7.appendChild(element7);
}

javascript create del row function button or chkbox

I was trying to make a delete button to delete rows or using chkbox and button to delete rows. When I use the deleteRow function, it will delete all rows in the table. Also, I have assigned an element id to do other functions, so I cannot change the addrow function about assign element id.
When i use delete button, it can do i wanted. I want to delete the row when the checkbox checked How can i use checkbox to delete row ?
Here's my code:
HTML:
<form>
<table>
<tr>
<td align="center" colspan="3"></td>
</tr>
</table>
<table id="dataTable" class='table table-striped table-hover table-bordered'>
<tr>
<td align="center"><b>Product ID:</b></td>
<td><input type="text" name="productid" id="productid" class="form-control" /></td>
<td align="center"><b>QTY:</b></td>
<td><input type="text" name="poqty" id="poqty" class="form- control"></td>
</tr>
<tr>
<input type="button" value="Add Item" onclick="addRow('dataTable')" class="form-control" />
<input type="button" value="del Item" onclick="deleteRow('dataTable')" class="btn btn-default" />
</tr>
<tr>
<td>
<input type="submit" value="confirm">
</td>
</tr>
<div id="txtHint"></div>
<div id="qty123"></div>
</td>
</tr>
</table>
</form>
Javascript:
<script language="javascript">
var y = 0;
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.name = "chkbox";
element1.id = "chkone" + y;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox1[]";
element2.id = "txtone" + y;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox2[]";
element3.id = "txtre" + y;
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox3[]";
element4.id = "qtyone" + y;
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox4[]";
element5.id = "txtra" + y;
cell5.appendChild(element5);
y++;
}
</script>
<script>
function deleteRow(dataTable) {
var table = document.getElementById(dataTable);
var row = document.getElementById(dataTable);
row.parentNode.removeChild(row);
}
</script>
I want to delete the row when the checkbox checked , How can i use checkbox to delete row ?

There's probably more than one problem here, but what sticks out to me is this:
<input type="button" value="Add Item" onclick="addRow(tableID)" class="form-control" />
It doesn't look like you're correctly passing tableID to this function, whereas you're correctly passing a parameter to the deleteRow() function. Where is tableID in your code?
Given the code you've posted, nothing happens when you invoke addRow() because the function is never fired - tableID is undefined.

Dynamic Rows and Table

I am trying to implement a dynamic table but when the button is pressed to add a row the row is added but the input text box is not inserted in both cells. Any idea how to solve this problem.
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element = document.createElement("input");
element.type = "text";
element.name = "txtbox[]";
secondCell.appendChild(element);
}
</script>

You need to add another "input" element and append this into the thirdCell.
Try changing the last bit of your javascript function to this:
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
Shown here
Note: Your script tag should go inside the body of the html.
Here is what the final code could look like:
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</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 firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
}
</script>
</body>
</html>

You have not written the code to add a new text element to the third column. Add the below mentioned code after "secondCell.appendChild(element);" section of your code:
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
thirdCell.appendChild(element2);

How to dynamically add Date in a form using JavaScript?

I have this form code to dynamically add rows. How can I add a date dynamically?
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="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 + 1;
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>
</HEAD>
<BODY>
<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">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
This the code for adding row dynamically
This is the code for calendar
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<INPUT type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>

add a new cell for example,
var cell4 = row.insertCell(3);
cell4.innerHTML = new Date();
.
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
<TD> <INPUT type="text" name="testinput" /></TD>
</TR>
can you explain where to insert the date?