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>

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

javascript dynamically add delete row nested

I've run into a problem with adding and deleting blank rows in javascript... it's a nesting issue and unique id issue.
To summarize, I have three form fields. Field1, Amount1, Amount2. Field1 can have multiple Amount1 & Amount2. There can be multiple Field1 as well, which also can have mutiple Amount1, Amount2. The problem is that my "Add" buttons copies the extra Amount1, Amount2 (when exists). Just to explain, the "Add row" adds Amount1,Amount2. The "Delete Row" deletes Amount1,Amount2 when the checkbox is checked.
When I click the "Add" button, I want a new Field1, Amount1, Amount2 but no additional Amount1,Amount2. And when I click "Add Row" or "Delete Row" in the additional sets of form fields, I want it to add or delete the Amount1,Amount2 in that particular set.
I need to assign a unique identifier to each entire row to get this to work but cannot figure it out.
Here is my code, which will probably make more sense if it's executed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><head>
<script type="text/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.row[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(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e)
{
alert(e);
}
}
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
</script>
</head>
<body>
<fieldset id="fieldset">
<div id="placeholder">
<div id="template">
<br>
<table id= "act_legis">
<tr>
<td>Field1:</td>
<td>Amount1:</td>
<td>Amount2:</td>
<td> </td>
</tr>
</table>
<table id= "act">
<tr>
<td>
<button type="button" name="Submit"
align = "left" onclick="Add();">Add</button>
<input name="Field1" type="text" size="4" maxlength="4"/></td>
</tr>
</table>
<table id= "legis_amounts">
<tr>
<td>
<input type="checkbox" name="chk"/>
<input name="Amount1" type="text" size="10"maxlength="18"/>
</td>
<td>
<input name="Amount2" type="text" size="10" maxlength="18"/>
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type="button" onclick="addRow('legis_amounts');
return false;" value = "add row"/>
<input type="button" value = "delete row" onclick="deleteRow
('legis_amounts');return false;" />
</td>
</tr>
</table>
</div> <!-- template -->
</div> <!-- placeholder -->
</fieldset>
<table>
<tr>
<td><p> </p>
</td>
</tr>
</table>
</body>
</html>