We Keep Coding

Add JQuery functionality to dynamically created radio buttons

I'm currently trying to add a jQuery function to a row of radio buttons. The problem is that I need to add dynamically many rows. Now For this example I only added 2 elements into the array of newNodes, but in my application newNodes can potentially have many different sizes.
So basically I want to add the Query function something like this:
$('#rowID input').on('change', function() {
alert($('input[name=i]:checked', '#rowID').val());
});
Where it exists inside the forloop and is added for each new row. "rowID" is a variable assigned to the unique row identifier and then use the loop iterator "i" as a way to distinguish the radio buttons for each row.
Here is the HTML:
<form id="createEdges" method="POST>
<fieldset>
<legend class="title">Modify the graph!</legend>
<table id="createEdgesTable">
</table>
<input type="button" class="btn btn-default" id="backToThirdForm" onclick="goBackToForm3()" value="Back"/>
</fieldset>
And Here is the Javascript:
newNodes = [];
newNodes.push(0);
newNodes.push(1);
//get HTML Table to add rows in
var edgeTable = document.getElementById("createEdgesTable");
//Create a table row for each node
for (var i in newNodes) {
var row = edgeTable.insertRow();
row.id = "node" + i;
//Show name of the node
var td = document.createElement('td');
var text = document.createTextNode(newNodes[i]);
td.appendChild(text);
row.appendChild(td);
//Choice for showing node
var td2 = document.createElement('td');
var radioButton1 = document.createElement('input');
radioButton1.type = "radio";
radioButton1.name = i;
radioButton1.value = "showNode";
td2.appendChild(radioButton1);
row.appendChild(td2);
//Choice for creating edge
var td3 = document.createElement('td');
var radioButton2 = document.createElement('input');
radioButton2.type = "radio";
radioButton2.name = i;
radioButton2.value = "createEdge";
td3.appendChild(radioButton2);
row.appendChild(td3);
//Choice for deleting node
var td4 = document.createElement('td');
var radioButton3 = document.createElement('input');
radioButton3.type = "radio";
radioButton3.name = i;
radioButton3.value = "removeNode";
td4.appendChild(radioButton3);
row.appendChild(td4);
var rowID = row.id;
}
$('#node0 input').on('change', function() {
alert($('input[name=0]:checked', '#node0').val());
});
JSFiddle: https://jsfiddle.net/nxexrq9y/
Any example on how to make this work for each row? I'm relatively new to JQuery and have been stuck on this problem for quite some time now. Thank you for your time and help!

Just change your script with following code.
$('tr[id^=node] input').on('change', function() {
alert(this.value);
});
Explanation:
Scripts find any tr whose id starts with node. this covers all your dynamically generated TRs. Further selection narrows down to only input element in each TR, and registers change event for that element. On that change event your have already got that element so you can easily access its value there.
Here is Js Fiddle Link
Further if you want to know clicked radio falls in which node, you can check out this js fiddle.
$('tr[id^=node] input').on('change', function() {
var row = $(this).parents('tr:first').get(0);
alert('Node: '+ row.id+ ' value:' + this.value);
});

html - javascript not working in dynamic generated html form

A table row in a form which is dynamically generated with a "Add row " button.
One field in the row is Date which uses datepicker to select the date.
PROBLEM:
The datepicker doesn't show when the row is dynamically generated.
I am using bootstrap 3.
Here is the code that generate table row on button click.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 40){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum Players per Entry is 40");
}
}
HTML MARKUP FOR DATE INPUT:
<div class="form-group">
<label for="InputDatePicker">Date:</label>
<input type="text" class="form-control" placeholder="Select Date" id="InputDatePicker">
</div>
JAVASCRIPT to call datepicker function on input
<script>
$('#InputDatePicker').datepicker();
</script>
UPDATED CODE TO ADD A NEW ROW AND INITIALIZING THE DATEPICKER
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 40){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
$('#InputDatePicker').datepicker();
}else{
alert("Maximum Players per Entry is 40");
}
}

Presumably you mean that you're using the jQuery UI Datepicker plugin? (Or something similar?) In that case you're never initializing the plugin on the dynamically added elements:
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
It sounds like you're successfully adding new elements to the page. But once those elements are added, you need to target the one(s) that should be a Datepicker and initialize the plugin on those elements:
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
$(someSelector).datepicker();
The value of someSelector is entirely up to you, I don't know your markup. But the idea is that you need to uniquely identify the newly added elements which need to become Datepickers. Initializing the plugin when the page loads only initializes the elements which exist at that time, not elements which are added later.
Update:
According to your jQuery selector:
$('#InputDatePicker').datepicker();
You are identifying an element with an id of "InputDatePicker". So one of two things is happening:
Your newly-added elements don't have that id, which means this selector isn't selecting them. In this case you need to select the newly-added elements.
Your newly-added elements do have that id, which means your HTML is invalid and the behavior of the code is undefined. In this case you need to fix your HTML so that you don't re-use id values and update your selector accordingly. id values need to be unique, by definition.

Input field not appending to td

I am trying to create a table with an input field dynamically but my code ends up creating an empty table.
var calcDiv = document.getElementById("calc_div");
var calcTab = document.createElement('TABLE');
var tbody = document.createElement('TBODY');
var calcForm = document.createElement('FORM');
calcForm.id = "calculator_form";
//calc display
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.colspan = "4";
var comp = document.createElement('INPUT');
comp.type = "text";
comp.value = 0;
comp.disabled = true;
comp.id = "compDisplay";
td.appendChild(comp); //THIS DOESN'T SEEM TO WORK
tr.appendChild(td);
tbody.appendChild(tr);
calcForm.appendChild(comp);
calcTab.appendChild(tbody);
calcTab.style.width = "500px";
calcTab.style.height = "500px";
calcDiv.appendChild(calcTab);

You were missing a line and were incorrectly appending another. In:
tr.appendChild(td);
tbody.appendChild(tr);
calcForm.appendChild(comp);
You needed to:
tr.appendChild(td);
tbody.appendChild(tr);
calcTab.appendChild(tbody); <-- append the tbody to the table
calcForm.appendChild(calcTab); <-- append the table to the form
jsFiddle example
This produces the HTML:
<div id="calc_div">
<table style="width: 500px; height: 500px;">
<tbody>
<tr>
<td>
<input type="text" disabled="" id="compDisplay">
</td>
</tr>
</tbody>
</table>
</div>
Note that you may also want to use td.setAttribute('colspan','4'); instead of td.colspan = "4";

Maybe because you are adding the input named "comp" again in the form after two rows? "calcField.addChild(comp)"

What's happening is you're appending comp to the td, then appending it to the form after that. This removes it from the table it was in and puts it in the form, which isn't attached anywhere in your document.
Here's a sample with the appending to the form commented out. Or perhaps you'd prefer to append the form to the td instead.

I think this method will help you out. I've coded it so that the appendChild follows the DOM tree. Take a look. Note: I created a variable to append the target "calc_div" to the document body. Feel free to take that out.
var div = document.body.appendChild(document.createElement('div'));
div.id = "calc_div";
var table = div.appendChild(document.createElement('table'));
table.style.width = "500px";
table.style.height = "500px";
var tbody = table.appendChild(document.createElement('tbody'));
var trow = tbody.appendChild(document.createElement('tr'));
var tcell = trow.appendChild(document.createElement('td'));
tcell.colSpan = "4";
var input = tcell.appendChild(document.createElement('input'));
input.id = "compDisplay";
input.type = "text";
input.value = 0;
input.disabled = true;

Add new row to the table containing a drop down list on button click

I want to add a new row on button click to a table. New Row will have one textbox and one drop-down. Dropdown (select element)'s options to be added from session attribute.
I am able to add textbox using following function.
function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="abc";
cell1.appendChild(element1);
var cell3 = row.insertCell(1);
var element2 = document.createElement("select");
var option1 = document.createElement("option");
option1.innerHTML = "Option1";
option1.value = "1";
element2.appendChild(option1, null);
}
I have one session attribute "types". I want to add one drop down list as other column to the row where options are to be added from types. I am setting the attribute "types" when page gets loaded.
I am using Java Servlet for server side.
Any help is appreciated.
<c:forEach items="${types}" var="type">

If u have session attribute "types" then u can do like this. Post ur remaining coding so i can update my answer.
var Type = 'option 1';
function AddRow() {
$('#tblTest').append(
'<tr><td>' +
'<input type="text" />' +
'<select><option>' + Type + '</option></select>' +
'</td></tr>');
}
<table id="tblTest">
<tr>
<td>
<input type="text" name="data1" value="TempData" />
</td>
<td>
<input type="button" value="Add" onclick="AddRow()" />
</td>
</tr>
</table>

Add/Remove rows dynamically in a table in javascript

I want to add/remove rows in a table dynamically. I have javascript function to add and remove the rows. But, I want the delete button beside every single row so that I can delete a particular row.
ANd I want to add a row only if the first row is completely filled.
function to remove row
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function to add rows:
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 = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
}
my table:
<table id="tableId">
<tr><td>Host Name</td><td>Directory</td></tr>
<tr><td><input type="text"/></td><td><input type="text"/></td></tr>
<tr><td><input type="button" value="+" onclick="addRow(tableId)"/></td>
<td><input type="button" value="-" onclick="removeRowFromTable()"/></td></tr>
</table>
Any help is appreciated! Thanks in Advance!!!

If you put a delete button on each row, then:
<tr>
<td><input type="button" value="Delete row" onclick="deleteRow(this)">
<td><input type="text">
<td><input type="text">
</tr>
And the deleteRow function can be:
function deleteRow(el) {
// while there are parents, keep going until reach TR
while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
el = el.parentNode;
}
// If el has a parentNode it must be a TR, so delete it
// Don't delte if only 3 rows left in table
if (el.parentNode && el.parentNode.rows.length > 3) {
el.parentNode.removeChild(el);
}
}
BTW, if all your rows have the same content, it will be much faster to add a row by cloning an existing row:
function addRow(tableID) {
var table = document.getElementById(tableID);
if (!table) return;
var newRow = table.rows[1].cloneNode(true);
// Now get the inputs and modify their names
var inputs = newRow.getElementsByTagName('input');
for (var i=0, iLen=inputs.length; i<iLen; i++) {
// Update inputs[i]
}
// Add the new row to the tBody (required for IE)
var tBody = table.tBodies[0];
tBody.insertBefore(newRow, tBody.lastChild);
}

You can avoid a lot of cross browser headaches by using jquery. Here is a sample.
http://jsfiddle.net/piyushjain7/gKJEs/

Javascript has this really useful function called deleteRow where if you know the index you are deleting from, you can simply input that number, and then it'll delete that specific row (index's starting at 0 - tbl.rows.length).
I also found a nice example that uses it in action. You can adjust it to fit your needs though (although his uses checkboxes which might be a lot cleaner than just making a button next to every single row). I don't encourage you to blatantly copy the code so if there is anything that confuses you, please let us know. Hope this helps.
EDIT: I didn't see you wanted to add rows after you found out the last row was completely filled. I'll update my answer when I figure that out. However, the basic idea of that is to check if the <td> tag has text in it (perhaps check if the text inside the tag isn't a blank or if there is a <td> tag at all and then if it isn't empty, make a new <tr> element else don't.

See http://jsfiddle.net/9gnAx/
HTML & JavaScript (body):
<table id="tableId">
<tr>
<th>Host Name</th>
<th>Directory</th>
<td><input class="add" type="button" value="+" /></td>
</tr>
<tr>
<td></td><td></td>
<td><input class="add" type="button" value="+" /></td>
</tr>
</table>
<script type="text/javascript">
(function(){
var els=getElementsByClassName("add","tableId");
for(var i=0;i<els.length;i++){
els[i].onclick=addRow;
}
els[0].onclick();
})();
</script>
CSS (head):
.add,.del{
width:25px;
}
JavaScript (head):
function getElementsByClassName(c,el){
if(typeof el=='string'){el=document.getElementById(el);}
if(!el){el=document;}
if(el.getElementsByClassName){return el.getElementsByClassName(c);}
var arr=[],
allEls=el.getElementsByTagName('*');
for(var i=0;i<allEls.length;i++){
if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
}
return arr;
}
function killMe(el){
return el.parentNode.removeChild(el);
}
function getParentByTagName(el,tag){
tag=tag.toLowerCase();
while(el.nodeName.toLowerCase()!=tag){
el=el.parentNode;
}
return el;
}
function delRow(){
killMe(getParentByTagName(this,'tr'));
}
function addRow() {
var table = getParentByTagName(this,'table')
var lastInputs=table.rows.length>2?
table.rows[table.rows.length-2].getElementsByTagName('input'):[];
for(var i=0;i<lastInputs.length-1;i++){
if(lastInputs[i].value==''){return false;}
}
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.className="del";
element3.value='-';
element3.onclick=delRow;
cell3.appendChild(element3);
}
Update:
RobG has made me realize that getParentByTagName throws an error if there isn't any parent with the nodeName passed.
If you want a more general getParentByTagName, which doesn't throw errors, you can use
function getParentByTagName(el,tag){
tag=tag.toLowerCase();
while(el&&el.nodeName.toLowerCase()!=tag){
el=el.parentNode;
}
return el||null;
}
And when you call the function you should check if the result is null.
Updated jsfiddle: http://jsfiddle.net/9gnAx/1/