We Keep Coding

Delete a row from a table using JavaScript

I have a table of rows and a button to delete it in each row.
I can remove a row bot the problem is that I need to update the value deleteRow(nb_of_rows) in every time I remove a row
This is the table code in HTML
<input type="button" id="insert_row" value="Insert Row" onclick="insert_row()" >
<br><br>
<table id="mytable" width="100%" border="2" >
<tr>
<th>Sr.</th>
<th>Item Name</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
<th>Delete</th>
</tr>
</table>
and this is JavaScript code
var srn = 0;
function insert_row(){
var table = document.getElementById("mytable")
var nb_of_rows = document.getElementById("mytable").rows.length;
var row = table.insertRow(nb_of_rows);
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);
var cell6 = row.insertCell(5);
cell1.innerHTML = changeSR();
var delete_btn = document.createElement("input");
delete_btn.type = "button";
delete_btn.className = "btn";
delete_btn.value = "Delete";
cell6.appendChild(delete_btn);
delete_btn.onclick = function deleteRow(){
return document.getElementById("mytable").deleteRow(nb_of_rows);
}
}
function changeSR(){
return srn = srn + 1 ;
}
and this is an online share of my code
enter link description here

The issue occurs because the index in nb_of_rows is in danger of being out of date by the time the button is clicked (especially if other rows and have been added and deleted in the meantime). Therefore it will either delete the wrong row, or crash because the index doesn't exist in the table any more.
The solution is fairly simple: make the button get the parent row it belongs to, and then get that row's current index at the point of deletion, rather than relying on the index it had when it was added.
Usefully the row element has an index property telling you its current index in the table body, which makes this solution possible.
Here's the event code you need:
delete_btn.onclick = function deleteRow() {
var row = this.parentElement.parentElement; //get the parent of the parent (i.e. the first parent is the table cell, and the parent of that is the row)
document.getElementById("mytable").deleteRow(row.rowIndex);
}
(BTW it makes no sense really to have a return statement in an event handler, since the control returns to somewhere in the JS event-handling engine, not to your code, so I removed that at the same time.)
Demo:
var srn = 0;
function insert_row() {
var table = document.getElementById("mytable")
var nb_of_rows = document.getElementById("mytable").rows.length;
var row = table.insertRow(nb_of_rows);
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);
var cell6 = row.insertCell(5);
cell1.innerHTML = changeSR();
var delete_btn = document.createElement("input");
delete_btn.type = "button";
delete_btn.className = "btn";
delete_btn.value = "Delete";
cell6.appendChild(delete_btn);
delete_btn.onclick = function deleteRow() {
var row = this.parentElement.parentElement;
document.getElementById("mytable").deleteRow(row.rowIndex);
}
}
function changeSR() {
return srn = srn + 1;
}
<input type="button" id="insert_row" value="Insert Row" onclick="insert_row()">
<br><br>
<table id="mytable" width="100%" border="2">
<tr>
<th>Sr.</th>
<th>Item Name</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
<th>Delete</th>
</tr>
</table>

Update Table rows onClick Events and Remove Previouslly added

I want to add new row, and remove previously added row with an onclick event.
I write code for it but this code only insert rows not delete previous one.
js
function addRow(tableID) {
console.log('hi')
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
html
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" border="1">
<tr>
</tr>
</table>

Use deleteRow().. and you might just be able to do it.
function addRow(tableID) {
console.log('hi')
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount) {
table.deleteRow(-1);
}
...
}

Adding new row to HTML table dynamically with JScript

I am writing a code in HTML + Jquery and need to add rows to a table dynamically.
I've written the code to add the rows dynamically, but it doesn't seem to work.
Here is my JScript code :
<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 = "date";
element1.name="datebox[];
element1.id = "dt";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var element2 = document.createElement("input");
element2.type = "select";
element2.name = "selectbox[]";
element2.id = "slct";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = rowCount + 1;
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.id = "txt";
cell3.appendChild(element3);
table.appendChild(cell1);
}
</script>
This is my Table:
<table id = "tab" style="width:500px">
<tr>
<th>Date</th>
<th>Treatment Goal</th>
<th>Comment</th>
</tr>
<tr>
<td><INPUT type="date" name="datebox[]" id = "dt"/></td>
<td>
<SELECT name="selectbox[]" id = "slct">
</SELECT>
</td>
<td><INPUT type="text" name="txtbox[]" id = "txt"/></td>
</tr>
</table>
I am calling the function in the onClick event of a button like this :
<input type="button" id="add" value="+" name="Add" onclick="addRow('tab')"/>
The html page doesn't respond to the click event and nothing happens.
Cannot understand what's going wrong.

Working Fiddle
The first problem is a syntax error on this line (you didn't close the double quote):
element1.name="datebox[];
^ missing "
The second problem is you are appending the cell to the table which is wrong, you should be appending the row:
table.appendChild(row);
^ changed to row from cell

You are missing a quotation mark on the line:
element1.name="datebox[];
after the name element.

Form within table contains dynamically created input parameters that are not being passed in IE 9 and 10

var i = 0;
var a = 3;
function addNewAnswer(tableID) {
var table = document.getElementById(tableID);
if(i < 10)
{
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = '<font size="2" face="Courier New"><b>Enter Answer ' + String.fromCharCode(67+i) + ':</b></font>';
var cell2 = row.insertCell(1);
var element1 = document.createElement("input");
element1.size = 40;
element1.type = "text";
element1.name = "answer"+a;
cell2.appendChild(element1);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "radio";
element2.name = "radios";
element2.value = String.fromCharCode(67+i);
cell3.appendChild(element2);
i++;
a++;
}
}
My HTML Form:
<table>
<tr>
<form method=post name="submitform" action="verify-qedit.jsp">
<td>
<form method=post name="submitform" action="verify-qedit.jsp">
<table id="dataTable">
<tr>
<th colspan="3" align="left">Question</th>
</tr>
</table>
</form>
</td>
</form>
</tr>
</table>
When I submit the form, I only can retrieve the parameters not created by the above javascript. It only works in compatibility mode - IE 8 standards and below. Please help because I have spent days trying to find out before posting this question.

Does this work on all the browsers you are targetting?
http://jsfiddle.net/4nbB5/1
function addNewAnswer(tableID) {
var rowCount, row, cell1, cell2, cell3, element1, element2, char;
var i = 0;
var table = document.getElementById(tableID);
while (i < 10) {
rowCount = table.rows.length;
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
char = String.fromCharCode(65 + i);
cell1.innerHTML = '<font size="2" face="Courier New"><b>Enter Answer ' + char + ':</b></font>';
cell2 = row.insertCell(1);
element1 = document.createElement("input");
element1.size = 40;
element1.type = "text";
element1.name = "answer" + i;
cell2.appendChild(element1);
cell3 = row.insertCell(2);
element2 = document.createElement("input");
element2.type = "radio";
element2.name = "radios";
element2.value = char;
cell3.appendChild(element2);
i++;
}
}
addNewAnswer('foo');
All I did was remove 'a', and declare 'i', change 'if' to while, changed 67 in fromCharCode to 65.. Looked to be what you may have wanted at some point so I stopped.

The problem had nothing to do with the javascript. It was because I was putting the form tag in the wrong place within the table after the tr tag instead of after the td tag.
<table>
<tr>
<td>
<form method=post name="submitform" action="verify-qedit.jsp">
<table id="dataTable">
<tr>
<th colspan="3" align="left">Question</th>
</tr>
</table>
</form>
</td>
</tr>
</table>

Add and retrieve text boxes in jsp

I want to add textbox dynamically in jsp page on "Add Row" button click. I have written java script to add it. No issues with that. But I am not able to retrieve those values in Servlet page. Any ideas?
Here is the script:
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 cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
}
And here is the jsp where script is called:
<INPUT type="button"
value="Add Row" onclick="addRow('dataTable')" />

You need to specify the name attribute. It becomes the request parameter name.
You can just give them all the same name.
element.name = "foo";
Or if you want to "respect" IE6/7 users as well
document.createElement('<input type="text" name="foo">');
(jQuery makes it all easier and better crossbrowser compatible)
Then you can access them all as follows in the servlet
String[] foos = request.getParameterValues("foo");
They will appear in the order as they appear in the HTML DOM tree.