I am using a script to add a row to my form table which is working absoulty fine. On my first input box I am using a datepicker which is working on the first row but when I add another row the datepicker isnet working. I'm assuming it's because there is no class. I have tried adding using this bit of code but with no luck: newcell.className = 'datepicker';
function addRow(tableID) {
var table = document.getElementById(tableID).getElementsByTagName('tbody')[0];
var rowCount = table.rows.length;
if(rowCount < 50){ // 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;
newcell.className = 'datepicker';
}
}else{
alert("Too many rows.");
}
}
You need to actually create the datepicker on the element, at the end of the for-loop body. Also, don't copy the innerHTML of the original row, as will also copy the id of the input, which must be unique and will break the date picker logic.
A complete working example is below.
function addRow(tableID) {
var table = document.getElementById(tableID).getElementsByTagName('tbody')[0];
var rowCount = table.rows.length;
if(rowCount < 50){ // 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.appendChild(document.createElement('input'));
$(newcell).find('input').addClass('datepicker');
$(newcell).find('input.datepicker').datepicker();
}
}else{
alert("Too many rows.");
}
}
$(function () {
$('.datepicker').datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<button onclick="addRow('table')">Add Row</button>
<table id="table">
<tbody>
<tr>
<td><input class="datepicker" /></td>
</tr>
</tbody>
</table>
Related
I want to find student's data by inserting their subject name and their score range. The teacher can add a new subject with an add button and can remove the subject too. Also the subject/option that has been already selected in the previous row will disable in the next new row.
Here is the html code
<button type="button" class="btn btn-bricky btn-sm" onclick="deleteRow('dataTable')"><span class="glyphicon glyphicon-remove"></span> Delete Row</button>
<table id="dataTable" class="table table-striped" style="font-size: 12px" >
<tr>
<td><input type="checkbox" name="chk"/></td>
<td>
<select name="subject" id="subject">
<option value="Math">Math</option>
<option value="Physic">Physic</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
Score Min : <input type="number" name="comsMin" style="width:70px" min="0" max="100"/>
Max : <input type="number" name="comsMax" style="width:70px" min="0" max="100"/></td>
</tr>
</table>
And here is the JavaScript code
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
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;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "#text":
newcell.childNodes[0].value = "";
break;
case "#checkbox":
newcell.childNodes[0].checked = false;
break;
case "#select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
//--------------
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
My problem is that I don't know how and where to write a code to disable the selected option that had been chosen in the first select box in the new added select box.
Is this possible?
Here's JS fiddle
We can have a separate table for storing the dataset in hidden mode and maintain the selection state in it.
Instead of hidden element you can also maintain the state in javascript variables.
function syncModdelAdd(tableID){
// Get the available selections
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var dataTable = document.getElementById('dataTable');
for(var i=0; i<rowCount; i++){
var selectedIndex = table.rows[i].cells[1].childNodes[1].selectedIndex;
dataTable.rows[0].cells[1].childNodes[1].options[selectedIndex].disabled=true;
}
}
function syncModelDelete(selectedIndex){
var dataTable = document.getElementById('dataTable');
dataTable.rows[0].cells[1].childNodes[1].options[selectedIndex].disabled=false;
var table = document.getElementById('resultTable');
var totalRows = table.rows.length;
table.rows[totalRows-1].cells[1].childNodes[1].options[selectedIndex].disabled=false;
}
Fiddle Link : https://jsfiddle.net/2tfacL9k/
I looking for help on how to reference specific text fields with jquery that are generated with javascript.
What I get works only on the first instance of the field reference.
HTML Code:
Record ID<input type="text" name="ri[]" id="ri1" size="7" style="font-size:0.9em;">
Qty Per Box<input type="text" name="qpb[]" id="qpb1" size="7" style="font-size:0.9em;">
Javascript Used To Generate More Rows Like Above
<!--Dynamically Create New Rows For Data Entry-->
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
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;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true === chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
So what I end up getting is multiple rows with the same id / name. What I simply want to do is validate input on keyup so I decided to use the (this).val method but it only works on the first row.
<script>
$(document).ready(function() {
$("#ri1").keyup(function() {
$(this).val($(this).val().replace(/[^\d]/g, ""));
});
});
</script>
Anybody know a better solution to validating input on when generating multiple rows of input fields this way?
Js fiddle http://jsfiddle.net/nS2LM/22/
Using an ID more than once is not recommended but if you are using the latest jQuery then event delegation is your answer:
<input type="text" name="ri[1]" id="ri1" size="7" style="font-size:0.9em;" class="do_stuff">
<input type="text" name="ri[2]" id="ri2" size="7" style="font-size:0.9em;" class="do_stuff">
<script>
$(document).ready(function() {
$('body').on('keyup', '.do_stuff', function() {
$(this).val($(this).val().replace(/[^\d]/g, ""));
});
});
</script>
The code above binds keyup to the body's child .do_stuff elements so any dynamically created elements with a class of .do_stuff will be caught by the keyup event.
When a row is added dynamically in a table, I don't get the datepicker,time spinner or the validations working for the second row.
my code for adding a row...
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i = 0;i<colCount;i++){
var newccell = row.insertCell(i);
newcell.innerHTML = table.rows[i].cells[i].innerHTML;
}
}
and my code for the button is
<input type = "button" onclick = "addRow(tableID)" name="+" value="+" id="add">
You need to initialize the plugins/widgets for dynamic elements once the elements are rendered to the dom
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newccell = row.insertCell(i);
newcell.innerHTML = table.rows[i].cells[i].innerHTML;
}
var $row = $(row);
$row.find('input.spinner').spinner(){};//initialize spinner
$row.find('input.datepicker').datepicker({});//iniitailze datepicker etc
}
use clone
function addRow(tableID) {
var $table = $('#' + tableID),
$first = $table.find('tr').first();
var $row = $first.clone().appendTo($table)
$row.find('input.spinner').spinner() {};
$row.find('input.datepicker').datepicker({});
}
You need .on()
As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.
Syntax
$( elements ).on( events, selector, data, handler );
Add validation code using Event Delegation.
Update
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newccell = row.insertCell(i);
newcell.innerHTML = table.rows[i].cells[i].innerHTML;
}
var $row = $(row);
$row.find('input.sp').spinner(); //find element which you want to add spinner
$row.find('input.dp').datepicker();//find element which you want to add datepicker
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
if (i==2) {
newcell.innerHTML="<div id='txtHint"+xx+"'></div>";
}
else if(i==0){
newcell.innerHTML = "<INPUT type='checkbox' name='chk[]'/>";
}
else if (i==1) {
newcell.innerHTML = table.rows[1].cells[1].innerHTML;
switch(newcell.childNodes[0].type) {
case "select-one":
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");showrole(this.value,"+xx+")");
}
}
else if (i==3) {
newcell.innerHTML="<div id='txtHintrole"+xx+"'></div>";
}
this is my function show select option depend on username i choose
after did some modification finally it work
and now i want to show role depend on username
so i have 2 show
1.for password
2.for username
onchange="showpassword(this.value)
this is my onchange inside select box
and now i want to showrole too
so when i choose the select
it will showed me password and role ad diferent cell
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");showrole(this.value,"+xx+")");
and i foudn that i have tu put semi colon to devide the function
and i still show an error that the show only show role and it happen to 2 of them
it should showpassword and showrole when i select the value
You can use the innerHTML property of the cell.
Do something like
newcell.innerHTML = '<div id="txthint' + i + '">content</div>';
Hope this help
I have an html page which includes a table. The following Javascript code a new table to my html page under the table that already exists each time I press the add new button. How can I modify this code so that the user will be able to add only 10 tables?
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
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;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
</SCRIPT>