1,105,363 Community Members

Click dynamic 3nos of text field create at a time in a table row

Member Avatar
biswa2ray
Newbie Poster
17 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
Bachov Varghese
Posting Whiz in Training
205 posts since Sep 2011
Reputation Points: 45 [?]
Q&As Helped to Solve: 52 [?]
Skill Endorsements: 6 [?]
 
0
 

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
biswa2ray
Newbie Poster
17 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
0
 

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
biswa2ray
Newbie Poster
17 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

@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
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
0
 

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
biswa2ray
Newbie Poster
17 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
0
 

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

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: