We Keep Coding

Function in JavaScript doesn't work while the other function works

I have a form written in HTML. In this form there are 2 buttons, and a table. Each row in the table contains a checkbox, and 2 text fields.
The buttons are to add and remove rows from the table. The remove button apply only to rows where their checkbox is checked. They have an onClick method that refers to 2 methods written in JavaScript on a <script> tag below, addRow(tableID) and deleteRow(tableID).
The addRow(tableID) works when I click its buttons, but nothing happens when I click the remove button, which refers to deleteRow(tableID) method.
This is the code of the form:
<form action="Page2.php" method="post" enctype="multipart/form-data">
<!-- Contacts Details -->
<p>
<input type="button" value="Add Contact" onClick="addRow('contacts')" />
<input type="button" value="Remove Contact" onClick="deleteRow('contacts')" />
<p>(All actions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="contacts" class="form" border="1">
<tbody>
<tr>
<p>
<td>
<input type="checkbox" name="chk[]" checked="checked" />
</td>
<td>
<label>Address</label>
<input type="text" name="ADDRESS[]" />
</td>
<td>
<label for="PHONE_NUMBER">Phone Number</label>
<input type="text" class="small" name="PHONE_NUMBER[]" />
</td>
</p>
</tr>
</tbody>
</table>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 10) {
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
} else {
alert("Maximum Contacts Number is 10");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
debugger;
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot Remove all Contacts");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
<!-- Form Sending -->
<input type="submit" value="Proceed">
</form>
EDIT #!:
I have just debugged the above code, and I found out that the variables chkbox and row from the deleteRow(tableID) method are shown in the debugger as undefined.
What can I do to fix this?

The problem is that using row.cells[0].childNodes[0] is an extremely brittle way to find nodes. You are retrieving a text node instead of the checkbox. Using
childNodes will break with even minimal changes to the HTML.
A more reliable way is to query for the element you are looking for
var chkbox = row.cells[0].querySelector('[type=checkbox]')
<form action="Page2.php" method="post" enctype="multipart/form-data">
<!-- Contacts Details -->
<p>
<input type="button" value="Add Contact" onClick="addRow('contacts')" />
<input type="button" value="Remove Contact" onClick="deleteRow('contacts')" />
<p>(All actions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="contacts" class="form" border="1">
<tbody>
<tr>
<p>
<td>
<input type="checkbox" name="chk[]" checked="checked" />
</td>
<td>
<label>Address</label>
<input type="text" name="ADDRESS[]" />
</td>
<td>
<label for="PHONE_NUMBER">Phone Number</label>
<input type="text" class="small" name="PHONE_NUMBER[]" />
</td>
</p>
</tr>
</tbody>
</table>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 10) {
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
} else {
alert("Maximum Contacts Number is 10");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
debugger;
var row = table.rows[i];
var chkbox = row.cells[0].querySelector('[type=checkbox]');
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot Remove all Contacts");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
<!-- Form Sending -->
<input type="submit" value="Proceed">
</form>

Deleting a table row from button click

The following code that I typed is used to add or delete rows in an html table. When I click the add button without any problem, but when I click the delete button though I want to delete a particular row I am unable to. I get an alert message stating:
"can not read property `onclick` of null "
How can I rectify this issue?
<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 colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
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 (document.getElementById('button').onclick == true) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD>
<INPUT type="button" name="button" value=delete id=delete onclick="deleteRow('dataTable')">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The easiest way I've found to handle scenarios like these is to work with classes instead of ids, and also to use context. IDs are used as unique identifiers for items on your page. Because you will very likely have more than one 'remove button' on your page, it would be best to target them using a class name instead.
So what I would do if I were you is to include jQuery, it would make things a lot simpler for you.
Add the below line in your html document before the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Add a 'removeRowBtn' class to your 'remove buttons'.
Then, for removing a row:
$(document).ready(function(){
$('body').on('click', '.removeRowBtn', function(){
// to make sure at least one row remains
if($('.removeRowBtn').length > 0){
$(this).parents('tr').remove();
}
});
});
And that's all you need. The above code uses context to target the parent row of the 'remove button' you are clicking on. No need to specify which table, calculate which row or how many rows are left etc.

First things first document.getElementById('button') returns undefined because you have no element in your page with id=button.
That is the error you are getting, but I think you should approach the deletion of your table rows slightly different.
The easiest way is this:
function deleteRow(elem) {
var table = elem.parentNode.parentNode.parentNode;
var rowCount = table.rows.length;
if(rowCount === 1) {
alert('Cannot delete the last row');
return;
}
// get the "<tr>" that is the parent of the clicked button
var row = elem.parentNode.parentNode;
row.parentNode.removeChild(row); // remove the row
}
and use this function as the click event handler on each button:
<table>
<tr>
<td><button onclick="deleteRow(this)">delete</button></td>
</tr>
</table>

There's no need to create deleteRow(tableID) because by doing this you are trying to override the default deleteRow function of javascript so instead of creating a deleteRow(tableID) just add 'document.getElementById('dataTable').deleteRow(this.rowIndex)' to onclick of the delete button
<input type="button" name="button" value=delete id=delete onclick="document.getElementById('dataTable').deleteRow(this.rowIndex)">

You can use below method to delete a particular row.
SCRIPT METHOD:
function deleteRow(element,tableID) {
try {
var tableElement = document.getElementById(tableID);
if(tableElement.rows.length <= 1){
alert("Cannot delete all the rows.");
return;
}
var x = element.parentElement;//td tag
x = x.parentElement;// tr tag
x.remove();
}catch(e) {
alert(e);
}
}
BUTTON ELEMENT IN TD
<TD><INPUT type="button" name="button" value=delete id=delete onclick="deleteRow(this,'dataTable')"></TD>

<div class="table-responsive">
<table class="table" id="testTable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Type</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="mainScript" name="mainScript"></td>
<td><input type="text" id="rollBackScript" name="rollBackScript"></td>
<td><select name="type" id ="type" >
<option value="Automated" selected >Automated</option>
<option value="Manual" >Manual</option>
</select>
</td>
<td><input type="button" class="btn btn-danger" value="Delete" onclick="deleteRow(this);"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row" align="left">
<input type="button" class="btn btn-success" value="Add Row" onclick="addRow('scriptsTable')" />
</div>
JavaScript functions
<script>
function addRow(tableId) {
var table = document.getElementById(tableId);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
case "button":
newcell.childNodes[0].value = "Delete";
break;
}
}
}
function deleteRow(deleteBtn) {
var table = document.getElementById('scriptsTable');
if(table.rows.length <= 2){
alert("Cannot delete all the rows.");
return;
}
if (typeof(deleteBtn) == "object") {
$(deleteBtn).closest("tr").remove();
} else {
return false;
}
}
</script>

Try this one. this is working example
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td><button>Delete</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
"columns": [
null,
null,
null,
{
"sortable": false
}
]
});
});
$('#example').on("click", "button", function(){
console.log($(this).parent());
table.row($(this).parents('tr')).remove().draw(false);
});
</script>

Save dynamic table rows in MongoDB using PHP

I've written some JavaScript to dynamically add rows to a <table>. How can I save data from the dynamically generated rows to my MongoDB database?
I have added php code to save table in mongodb.
there is a variable nextName which increments the name variable to help generate variables.
Here is my HTML and JavaScript:
nextName=2;
function myCreateFunction(tableid) {
var table = document.getElementById(tableid);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].name = "name' + nextName + '";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}nextName++;
}
}
function myDeleteFunction(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 <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
<table border="1" id="myTable">
<tr>
<th>select</th>
<th>Degree</th>
<th>H.R.A.</th>
<th>College/University</th>
<th>Divn.</th>
<th>%age/CGPA</th>
<th>Remarks</th>
</tr>
<tr>
<td><INPUT type="checkbox" name="chk" /></td>
<td>
<select id="ddeg" name="ddeg">
<option value="degg1">P.H.D.</option>
<option value="degg2">M.C.A.</option>
<option value="degg3">B.Sc</option>
<option value="degg4">B.E.</option>
<option value="degg5">12th</option>
<option value="degg6">10th</option>
</select>
</td>
<td><input type="text" name="hran" /></td>
<td><input type="text" name="college" /></td>
<td><input type="text" name="divn" /></td>
<td><input type="text" name="cg" /></td>
<td><input type="text" name="remark" /></td>
</tr>
</table>
<br>
<button onclick="myCreateFunction('myTable')">Add row</button>
<button onclick="myDeleteFunction('myTable')">Delete row</button>
<br>
<?php
session_start();
$m = new MongoClient();
$db=$m->form;
$col=$db->mycol;
$url=$target_file;
$arr=array();
for($x=2;$x<=nextName;$x++)
{
$arr[$x]=$_POST["name' + $x + '"];
}
$y=0;
$new = array(
foreach($arr as $value)
{
"tab' + $y + '"=>$value;
$y++;
}
);
$col->insert($new);
?>

Delete Table row using javascript

I have an HTML table with insert and delete row functionality and its working perfectly. But delete functionality works with checkbox + delete button.
When i want to delete a row, first i checked the checkbox and then press delete button. I want to make it directly with delete button. Below is my code,
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 <= 1)
{
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch(e)
{
alert(e);
}
getValues();
}
<a onclick="deleteRow('dataTable')">Delete Row</a>
<table id="dataTable">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td><input type="text" name="Name"></td>
</tr>
</table>
Note : Atleast 1 row should be there (Cannot delete all the rows)

If you want to use one button, a usable solution is to select/unselect the rows to be deleted onclick. This way multi select and delete is also supported. For example,
http://jsfiddle.net/Nt4wZ/
js
function selectRow(row) {
if (row.className.indexOf("selected") != -1) {
row.className = row.className.replace("selected", "");
} else {
row.className += " selected";
}
}
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 (row.getElementsByTagName("input")[0].className.indexOf("selected")!=-1) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
//getValues();
}
html
<a onclick="deleteRow('dataTable')">Delete Row</a>
<table id="dataTable">
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" onclick="selectRow(this)" />
</td>
</tr>
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" onclick="selectRow(this)" />
</td>
</tr>
</table>
css
input.selected {
border-color:lightgreen;
}
EDIT - response to comments
If you want to have a delete button for each row and use that instead, you can do something like the following,
http://jsfiddle.net/GRgMb/
html
<table id="dataTable">
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" />
</td>
</tr>
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" />
</td>
</tr>
</table>
js
function deleteRow(tableID,currentRow) {
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 (row==currentRow.parentNode.parentNode) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
//getValues();
}

This code is an example:
$(document).on('click', 'img.imgdel', function deleteRow() {
$(this).closest('tr').remove();
return false;
});
https://codepen.io/dionejpmc/pen/vYxLdyX

Unable To edit html table using javascript

I want to edit content of my html table using javascript. I am getting content in the form on click of edit button but when i click on save button it doesn't update the values of that row please help me out as it'll be very appreciated..
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(myTable) {
var table = document.getElementById("myTable");
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[]";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
function deleteRow(myTable) {
try {
var table = document.getElementById(myTable);
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);
}
}
function edt(myTable) {
try {
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
document.getElementById("txtname").value = table.rows[i].cells["1"].innerHTML;
document.getElementById("txtauthor").value = table.rows[i].cells["2"].innerHTML;
document.getElementById("txtcdate").value = table.rows[i].cells["3"].innerHTML;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("crw").value = i;
}
}
}catch(e) {
alert(e);
}
}
function savedit(myTable){
if(null != chkbox && true == chkbox.checked) {
var table = document.getElementById("myTable");
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[]";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
}
</SCRIPT>
</HEAD>
HTML
<BODY>
<INPUT type="button" value="Add Row" onClick="addRow('myTable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('myTable')" />
<INPUT type="button" value="Edit Row" onClick="edt('myTable')" />
<INPUT type="button" value="Save" onClick="savedit('myTable')" />
<table id="myTable" border="1">
<thead>
<th id="name"><input type="checkbox" id="chkbox" /></th>
<th id="name">Name</th>
<th id="author">Author</th>
<th id="cdate">Date</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="chkbox1" /></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td><input type="checkbox" id="chkbox2" /></td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" /><br/>
Author<input type="text" id="txtauthor" name="txtauthor" /><br/>
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/>
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />
</form>
<input type="hidden" id="crw">
</BODY>
</HTML>

replace edit function with following code(vice verse of your add function)
function savedit(myTable){
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.rows[i].cells["1"].innerHTML = document.getElementById("txtname").value ;
table.rows[i].cells["2"].innerHTML = document.getElementById("txtauthor").value;
table.rows[i].cells["3"].innerHTML = document.getElementById("txtcdate").value ;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("txtname").value = '';
document.getElementById("txtauthor").value = '';
document.getElementById("txtcdate").value = '' ;
chkbox.checked = false;
document.getElementById("crw").value = i;
}
}
}
I strongly recommend you to use some plugin or grid like kendo that is already tested and working