Member Avatar for biswa2ray

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...

  • 3 Contributors
  • 7 Replies
  • 342 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by gon1387
Member Avatar for Bachu

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>
Member Avatar for biswa2ray

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

Member Avatar for gon1387

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.

Member Avatar for biswa2ray

@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....

Member Avatar for gon1387

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.

Member Avatar for biswa2ray

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>
Member Avatar for gon1387

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.