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

Question

biswa2ray 0 Newbie Poster

13 Years Ago

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

html-css javascript

3 Contributors
7 Replies
354 Views
11 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by gon1387

Dani AI

Generated 9 Months Ago

A compact, modern pattern that builds on ’s jQuery idea and ’s vanilla approach. Use a small <template> for the three inputs, clone it for each new row, and use event delegation on the tbody so each Remove button deletes only its own row. This works offline (no CDN), avoids duplicate IDs, and names inputs as arrays so server-side code receives tidy lists.

<form id="myForm">
  <table id="tblSample" border="1">
    <thead>
      <tr><th>#</th><th>Name</th><th>Father</th><th>Age</th><th>Action</th></tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>

  <button type="button" id="addBtn">Add Row</button>
</form>

<template id="rowTemplate">
  <tr>
    <td class="index"></td>
    <td><input type="text" data-base="name" placeholder="Name"></td>
    <td><input type="text" data-base="fname" placeholder="Father"></td>
    <td><input type="text" data-base="age" placeholder="Age" size="4"></td>
    <td><button type="button" class="remove-btn">Remove</button></td>
  </tr>
</template>

<script>
const tbody = document.getElementById('tbody');
const tmpl = document.getElementById('rowTemplate');
const addBtn = document.getElementById('addBtn');

function updateIndices(){
  tbody.querySelectorAll('tr').forEach((tr,i)=>{
    tr.querySelector('.index').textContent = i+1;
    tr.querySelectorAll('input[data-base]').forEach(inp=>{
      inp.name = inp.dataset.base + '[]';
    });
  });
}

addBtn.addEventListener('click', ()=>{
  tbody.appendChild(tmpl.content.cloneNode(true));
  updateIndices();
});

tbody.addEventListener('click', e=>{
  if(e.target.classList.contains('remove-btn')){
    const tr = e.target.closest('tr');
    if(tr) tr.remove();
    updateIndices();
  }
});
</script>

Notes and quick troubleshooting:

Save as .html and open in any modern browser — no external libs required. For older browsers without <template>, use a hidden row as a fallback or create elements programmatically.
Never reuse static IDs on cloned elements; use name arrays (name[]) or data attributes instead.
If Remove doesn’t work, confirm the event listener is attached to the tbody and the button has class "remove-btn".
For server-side ordered IDs, generate indexes on submit rather than embedding numeric IDs in the DOM.

All 7 Replies

Bachu 45 Newbie Poster

13 Years Ago

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>

gon1387 22 Newbie Poster

13 Years Ago

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.

Reply to this topic

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.

biswa2ray 0 Newbie Poster · Answer 1 · 2013-01-30T12:14:14+00:00

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

biswa2ray 0 Newbie Poster · Answer 2 · 2013-01-30T16:00:32+00:00

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

gon1387 22 Newbie Poster · Answer 3 · 2013-01-30T17:29:46+00:00

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.

biswa2ray 0 Newbie Poster · Answer 4 · 2013-01-30T19:19:38+00:00

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>

gon1387 22 Newbie Poster · Answer 5 · 2013-01-30T20:19:15+00:00

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

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

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers