I want to add and delete 3nos of text field and label in a row dynamically using Add and delete button in javascript.
Is any one help me in this regard...

Recommended Answers

All 7 Replies

Try this

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

</head>
<body>
<table class="addRows">

</table>

<input type="button" name="addrow" value="Add Row" class="addRowBtn">
<script type="text/javascript">
$(function(){

           $('.addRowBtn').live('click',function() {
               $('.addRows').append('<tr><td><input type="text" name="txt1[]"></td><td><input type="text" name="txt2[]"></td><td><input type="text" name="txt3[]"></td><td><a href="#NOD" class="removeRow">Remove</a></td></tr>');
           })

           $('.removeRow').live('click', function() {
            $(this).closest('tr').remove();
           });
});
</script>

</body>
</html>

@Bachov! Thanks.... Will you help me more.. How Can I execute it offline...
Will you provide me this Script.

Hi biswa2ray,

Here's a simple sample vanilla javascript and jQuery I created on how to add, delete and view the values of a dynamic input elements.
You can review the sample on this link:
JSFiddle Vanilla JS Sample
JSFiddle jQuery Sample

Here's also the code:
VANILLA

//get the form element
var myForm =  document.getElementById("myForm"),
    //gets the div-container of the inputs
    ctrlGroup = document.getElementById("ctrl-group"),
    //get the add button
    addButton = document.getElementById("addInput"),
    //get the delete button
    deleteButton = document.getElementById("deleteInput"),
    //get the show value button
    showButton = document.getElementById("showVal");

// adds a new input when "add new input" button is clicked
addButton.onclick = function(){
    var newInput = document.createElement("div");
    newInput.setAttribute("name","myInput");
    newInput.innerHTML = '<label>Input ' + (ctrlGroup.childElementCount + 1) + '</label><input type="text" name="myInputA" /><input type="text" name="myInputB" /><input type="text" name="myInputC" />';
    ctrlGroup.appendChild(newInput);
};

//delete the last input when "delete input" is clicked
deleteButton.onclick = function(){
    ctrlGroup.removeChild(ctrlGroup.lastElementChild);
};

//show the value of the elements when clicked
showButton.onclick = function(){
    var inputA = document.getElementsByName("myInputA"),
        inputB = document.getElementsByName("myInputB"),
        inputC = document.getElementsByName("myInputC"),
        inputStr = "",
        i=0,
        len=ctrlGroup.childElementCount;
    for(;i<len;i++){
        inputStr += ("INPUT" + i +": " + inputA[i].value + " " + inputB[i].value + " " + inputC[i].value + "\n");
    }
    alert(inputStr);
};

JQUERY

$(document).ready(function(){
    // adds a new input when "add new input" button is clicked
    $("#addInput").on("click",function(){
        var $container = $("#ctrl-group"),
            len = $container.children().length,
            $newInput = $('<div name="myInput"><label>Input ' + (len + 1) + '</label><input type="text" name="myInputA" /><input type="text" name="myInputB" /><input type="text" name="myInputC" />');
        $("#ctrl-group").append($newInput);
    });

    //delete the last input when "delete input" is clicked
    $("#deleteInput").on("click",function(){
        $("#ctrl-group div:last-child").remove();
    });

    //show the value of the elements when clicked
    $("#showVal").on("click",function(){
        var inputVal = "";
        $("div[name=myInput]").each(function(){
            var buff="",
                $this = $(this);
            $this.children("input").each(function(){
                buff+= (this.value + " ");
            });
            inputVal += ($this.children("label").text() + ": " + buff + "\n");
        });
        alert(inputVal);
    });
});

Please let me know if you need claifications.
Also, please take note that live has been removed in the new version of jQuery. I'd suggest to use "on" instead.

@gon1387! thanks..

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'age' + iteration;
el.id = 'age' + iteration;
el.placeholder = 'Age...' + iteration;
el.size = 4;
cellRight.appendChild(el);
// right cell1
var cellRight = row.insertCell(1);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'fname' + iteration;
el1.id = 'fname' + iteration;
el1.placeholder = 'Father Name..' + iteration;
el1.size = 25;
cellRight.appendChild(el1);
// right cell2
var cellRight = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'name' + iteration;
el2.id = 'name' + iteration;
el2.placeholder = 'Name...' + iteration;
el2.size = 25;
cellRight.appendChild(el2);
}

function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}


</script>
<BODY>
<form action="sample.html">

</form>


<table border="1" id="tblSample">

<tr>

<th colspan="5">Customer Details</th>

</tr>

<tr>

<td>1</td>

<td><input type="text" name="name1"id="name1" size="25" placeholder = 'Name...1'/></td>
<td><input type="text" name="fname1"id="fname1" size="25" placeholder = 'Father Name...1' /></td>
<td><input type="text" name="age1"id="age1" size="4" placeholder = 'Age...1'/></td>
<td><input type="button" value="Add" onclick="addRowToTable();" /></td>
<!-- <td><a href="#" class="removeRow" onclick="removeRowFromTable();">Remove</a></td> -->
</tr>
</table>

<p>

<input type="button" value="Remove" onclick="removeRowFromTable();" />
</p>

</BODY>
</HTML>

I want to add a remove link on right side, when a new row create...
My code is....

Hi Biswa2ray,

Here's a tweaked one from you code and js script. JS Fiddle Tweaked
I rearranged the code and structure to suit it to what assume is your want. Just add the event on the button.

Hi gon1387,
I want the rightside of button "Remove" which is creating with new line. it should be delete the same rows...
I have modified the code...

<html>
<head>
<title> New Document </title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</head>
<script>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'age' + iteration;
el.id = 'age' + iteration;
el.placeholder = 'Age...' + iteration;
el.size = 4;
cellRight.appendChild(el);
// right cell1
var cellRight = row.insertCell(1);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'fname' + iteration;
el1.id = 'fname' + iteration;
el1.placeholder = 'Father Name..' + iteration;
el1.size = 25;
cellRight.appendChild(el1);
// right cell2
var cellRight = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'name' + iteration;
el2.id = 'name' + iteration;
el2.placeholder = 'Name...' + iteration;
el2.size = 25;
cellRight.appendChild(el2);
// ADDED
    //Insert on the 5th column
    var cellRight = row.insertCell(4);
    //create and append the button
    var e13 = document.createElement('input');
    e13.type = 'button';
    e13.value = 'Remove this Row'; 
    cellRight.appendChild(e13);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

</script>
<body>
<form action="sample.html">
</form>
<table border="1" id="tblSample">
<tr>
<th colspan="5">Customer Details</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="name1"id="name1" size="25" placeholder = 'Name...1'/></td>
<td><input type="text" name="fname1"id="fname1" size="25" placeholder = 'Father Name...1' /></td>
<td><input type="text" name="age1"id="age1" size="4" placeholder = 'Age...1'/></td>
<td><input type="button" value="Add Row" onclick="addRowToTable();" /></td>
<!-- <td><a href="#" class="removeRow" onclick="removeRowFromTable();">Remove</a></td> -->
</tr>
</table>
<p>

<!-- <input type="button" value="Remove Last Row" onclick="removeRowFromTable();" /> -->
</p>
</body>
</html>

hi Biswa2ray,

I think it would be better with this:

insertRow can be used with tbody and table, and will accept an argument as the position where it should be inserted, it's the same as insertCell on a Table Row element. Both returns the inserted element, so you can modify them as you please. Those returned element can be modified like any other HTML element.

var table = document.createElement("table"),
    row1,
    cell1,
    insertedCell;

//create a new row
row1 = table.insertRow();
/***************************************
//at this point table should look like this
<table>
    <tr></tr>
</table>
***************************************/

//create a new cell at row1
cell1 = row1.insertCell();
/***************************************
//at this point table should look like this
<table>
    <tr>
        <td></td>
    </tr>
</table>
***************************************/

//create new cells for insertion sample
row1.insertCell();
row1.insertCell();
/***************************************
//at this point table should look like this
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
***************************************/

//insert the a new cell at the second td position
// it's a zero index so the 2nd position is in 1
insertedCell = row1.insertCell(1);
insertedCell.innerHTML = "Hi! I'm at the 2nd position.";
/***************************************
//at this point table should look like this
<table>
    <tr>
        <td></td>
        <td>Hi! I'm at the 2nd position.</td>
        <td></td>
        <td></td>
    </tr>
</table>
***************************************/

You can check these references:
DOM - HTMLTableElement
DOM - HTMLTableRowElement

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.