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>

removing textfield in javascript?

I have this problem using javascript whenever I create row and try to remove one, the last row can only removed. here's my javascript
<script>
function createinput(){
var field_area = document.getElementById('fields');
var num = document.forms["zxc"]["set"].value;
for(var count=1;count<=num;count++){
var tr = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var label = document.createElement("label");
var label2 = document.createElement("label");
var label3 = document.createElement("label");
var label4 = document.createElement("label");
var input = document.createElement("input");
var input2 = document.createElement("input");
var input3 = document.createElement("input");
var input4 = document.createElement("input");
input.id = 'qty[]';
input.name = 'qty[]';
input.type = "text";
input.className = "form-control";
input2.id = 'unit[]';
input2.name = 'unit[]';
input2.type = "text";
input2.className = "form-control";
input3.id = 'articles[]';
input3.name = 'articles[]';
input3.type = "text";
input3.className = "form-control";
input4.id = 'serial_number[]';
input4.name = 'serial_number[]';
input4.type = "text";
input4.className = "form-control";
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
td.appendChild(label);
td2.appendChild(label2);
td3.appendChild(label3);
td4.appendChild(label4);
label.appendChild(input);
label2.appendChild(input2);
label3.appendChild(input3);
label4.appendChild(input4);
field_area.appendChild(tr);
var removalLink = document.createElement('a');
removalLink.className = "remove";
removalLink.onclick = function(){
field_area.removeChild(tr);
}
removalLink.appendChild(document.createTextNode('Remove Field'));
tr.appendChild(removalLink);
}
}
</script>
And here's my HTML.
<form name="zxc" method="post">
<label><input type="text" id="set" name="set"></label><input type="button" onClick="createinput()" value="create" ></form>
<table width="800" id="fields">
<tr>
<th>Quantity</th>
<th>Unit</th>
<th>Article</th>
<th>Serial</th>
</tr>
</table>
I used a for loop to control how many rows can be created.. I can't solve the problem in removing each rows. I need help please!

UPD Working demo http://jsfiddle.net/tarabyte/5TWsv/2/.
You are creating functions in a loop. They will point the same variable. You need
var makeHandler = function(row) {
return function () {
field_area.removeChild(row);
}
};
...
for(...) {
...
removalLink.onclick = makeHandler(tr);
Then num is of type string. You need to convert it to a number
var num = parseInt(document.forms["zxc"]["set"].value);
And ensure num is actually a number
if(!isNaN(num)) {
And finally IDs have to be unique within document! That's why it is called an "identifier".

Add and removing rows [with input field] in a table

I'm a total javascript noobie. I developed the code bellow following and modifing some random tutorial I found.
It should add and remove rows with input fields at a table, however, it does nothing. It also worth saying that I called the function as a link. I added 'javascript:addRow()' inside the tag and at the header. Did I missed something?
function addRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
var row = table.insertRow(rowCount);
var cel1=row.insertCell(0);
var element1= document.createElement("input");
var element1.type="text";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var element2.type="text";
cell1.appendChild(element2);
var cell2=row.insertCell(2);
var element3.type="text";
cell1.appendChild(element3);
rowCount++;
}
}
function removeRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
table.deletRow(rowCount);
rowCount--;
}
}

You have several errors, but here is the basic working model. I think you should be able to sort it out from here
http://jsfiddle.net/dBzkX/
function addRow() {
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
//You declared var in front of the same variable twice. Don't do that.
//You were appending cells inside existing cell. Add them to row instead.
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement('input');
element1.type="text";
cell1.appendChild(element1);
row.insertCell(1);
row.insertCell(2);
}
}
function removeRow(){
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
//you had type in deletRow. Also, you can pass in -1 to remove the last row
table.deleteRow(-1);
}
}

The error is here:
var element1= document.createElement("input");
var element1.type="text";
It should be
var element1= document.createElement("input");
element1.type="text";
and similar for the other elements.
You declare the variable with
var element1 = 'something';
and then access it with
element1 = 'something different';
Also there is a typo in
var cel1=row.insertCell(0);
It needs to be
var cell1=row.insertCell(0);
Additionally you did not define element 2 and 3,
used cell2 twice where it should be cell2 and cell3 and only appended to cell1.

How to run this script correctly to display the table in runtime?

I am trying to display a table with data in runtime using script.
I called the script from table header. Is that possible to call a function from table header.
</HEAD>
<BODY>
<TABLE id="dataTable" width="350px" border="1" onload="start('dataTable');">
<TR>
<THEAD>
<TR>
<TH>Select</TH>
<TH>Id</TH>
<TH>Name</TH>
<TH>Age</TH>
<TH>Dept</TH>
<TH>Option</TH>
</TR>
</THEAD>
</TABLE>
</BODY>
</HTML>
The Script is
function start(dataTable) {
var data = new Array();
var id;
var name;
var age;
var dept;
data[0].id = "1";
data[0].name = "Tamil";
data[0].age = "23";
data[0].dept = "CSE";
data[1].id = "1";
data[1].name = "Tamil";
data[1].age = "23";
data[1].dept = "CSE";
data[2].id = "1";
data[2].name = "Tamil";
data[2].age = "23";
data[2].dept = "CSE";
for (var i = 0; i<data.length; i++)
{
var table = document.getElementById(tableID);
var rowCount = data.length;
var row = table.insertRow(rowCount);
//Check box
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
//ID Column
var cell2 = row.insertCell(2);
cell2.innerText = data[i].id;
//Name Column
var cell3 = row.insertCell(3);
cell3.innerText = data[i].name;
//Age Column
var cell4 = row.insertCell(4);
cell3.innerText = data[i].age;
//Dept Column
var cell5 = row.insertCell(5);
cell5.innerText = data[i].dept;
//Button Column
var cell6 = row.insertCell(6);
var element2 = document.createElement("input");
element2.setAttribute("type", "button");
element2.setAttribute("id", "dataRow"+id);
element2.setAttribute("value", "Edit");
cell6.appendChild("element2");
}
}
The output is just the Headers. I cant get the data into table.
Thanks for suggestions in advance.

width="350px"
px is CSS. No px when using the HTML attribute.
onload="start('dataTable');"
There is no load event on <table>, this will never be called. Put a <script> element after the table to call the function.
var data = new Array();
For sanity, use [] array literal syntax:
var data= [
{id: 1, name: 'Tamil', age: 23, dept: 'CSE'},
...
];
var id; [and name etc.]
You never use these variables. Declaring vars has nothing to do with members of an object.
document.getElementById(tableID)
You called that variable dataTable not tableID.
cell2.innerText = data[i].id;
innerText is a non-standard IE extension. Consider using the standard textContent property first, if available, or just use plain old cell2.appendChild(document.createTextNode(data[i].id));, which is supported more widely than either.
element2.setAttribute("type", "button");
Never use getAttribute/setAttribute in an HTML document, there are bugs in it in IE. Instead use the DOM Level 2 HTML properties, which are easier to read anyway. element2.type= 'button';.
cell6.appendChild("element2");
That's a string, not the variable element2.

Just call your script in a <script> tag after </table>. Your script should be able to see the table elements because they're alreadyy loaded

Adding Combo-box dynamically

I'm trying to design a table in HTML which can add a row when I click "add row" button & the same for deleting an added row if i intend to delete it. I have written a javascript for adding checkbox and text. But I want even combo-boxes in it and I m stuck in the middle. Could you guys just figure it out and let me know how to do that?
This is my JS file.
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);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
//This is where the PROBLEM is!!
var element4 = document.createElement("select");
element4.type = "option";
cell5.appendChild(element4);
}
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);
}
}
// JavaScript Document
NOTE: Please dont suggest SERVER_SIDE SCRIPTING. I'm just doing my homework on Java Script :)

This should do the trick:
var cell5 = row.insertCell(4);
//This is where the SOLUTION is!!
var element4 = document.createElement("select");
var option1 = document.createElement("option");
option1.value="1";
option1.innerHTML="sample1";
element4.appendChild(option1);
var option2 = document.createElement("option");
option2.value="2";
option2.innerHTML="sample2";
element4.appendChild(option2);
cell5.appendChild(element4);

Try to think of the outcome that you wish to get. In this case you wish to have HTML that looks like this:
<select>
<option></option>
<option></option>
</select>
So the question is what elements are there? There are three in my example, a select and two options. So in your JavaScript how do you create elements?
var element4 = document.createElement("select");
This creates a select. So how would you create an option?
var option1 = document.createElement("option");
maybe?
how would you add the option to the select? Same way you add the select to the cell.
element4.appendChild(option1);
then create the other options that you need and add the select to the cell.

why not trying
var sel=document.createElement("select");
// repeat this for each option you have
var opt=document.createElement("option");
opt.value="my option value";
opt.text="my option to be displayed";
sel.appendChild(opt);
// end repeat
cell5.appendChild(sel);