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
}
Related
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>
Ajax function is as below
<script type="text/javascript">
function getStudentDetails() {
var userName = document.getElementById("getName").value;
$.ajax({
type : "POST",
cache : false,
data : {name:userName},
url : "get_project_details.php",
success : function(student_details) {
var resArr = JSON.parse(student_details);
document.getElementById("pname").value = resArr[0];
}
});
}
</script>
And I am using Datatable with below function
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10) {
// 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;
// tooltip code for each row
// re-instantiate tooltip after the new ones are added since there is no eventhandler attached to them. (calling tooltip function here)
//$onChange=getStudentDetails();
$('[data-toggle="tooltip"]').tooltip();
}
}
else
{
alert("Allowed maximum items per indent is 10. Please raise one more indent if required");
}
}
When I Select Project Number, project name is appearing in next field, but after adding another row Ajax function getStudentDetails() is not working
I am adding rows and cols to html table programatically using Javascript:
for (var i = 0; i < results.length; i++) {
table = document.getElementById("EntityRecords");
rowCount = table.rows.length;
row = table.insertRow(rowCount);
row.id = results[i].LeadId;
row.className = "EntityRecordsRow";
cell1 = row.insertCell(0);
element = document.createElement("input");
element.type = "checkbox";
element.name = "chkbox[]";
cell1.appendChild(element);
cell1.className = "EntityRecordsCol";
cell2 = row.insertCell(1);
cell2.innerHTML = results[i].FirstName + " " + results[i].LastName;
}
On button click event, I need to find selected checkbox. I am reading the table cells using below code but checkbox cell checked property is undefined:
function OnRecordSelectionBtnClick() {
var table = document.getElementById("EntityRecords");
for (var i = 0, row; row = table.rows[i]; i++) {
var col = row.cells[0];
if (col.checked) {
var selectedText = row.cells[1].innerHTML;
alert(selectedText);
}
}
}
Any suggestions?
if ( col.firstElementChild.checked ), not if ( col.checked ). col is td element and its first child is input that has checked property.
I tried to add a virtual keyboard to my code using jQuery, in fact I have several text fields and I added to each on this keyboard.
My problem is when I load the page it take a lot of times (~ 10 seconds) to display.
This is my Demo.
Code:
var table = document.getElementById("Table-1");
var rowCount = table.rows.length;
for(var i=0;i<150;i++) {
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
cell1.name = "animate";
cell1.id = i ;
var values = document.createElement("input");
values.type = "text" ;
cell1.appendChild(values);
rowCount++;
}
$('input[type=text]').keyboard({
layout: "qwerty"
});
A first solution to my problem ; I only call the keyboard when I click in the text box.
Demo.
But it's still a bit slow...
Code :
var table = document.getElementById("Table-1");
var rowCount = table.rows.length;
for(var i=0;i<150;i++) {
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
cell1.name = "animate";
cell1.id = i ;
var values = document.createElement("input");
values.type = "text" ;
cell1.appendChild(values);
rowCount++;
$('#'+i).click(function() {
$('input[type=text]').keyboard({
layout: "qwerty"
});
});
}
I'm a total javascript noobie. I developed the code bellow following and modifing some random tutorial I found.
It should add and remove rows with input fields at a table, however, it does nothing. It also worth saying that I called the function as a link. I added 'javascript:addRow()' inside the tag and at the header. Did I missed something?
function addRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
var row = table.insertRow(rowCount);
var cel1=row.insertCell(0);
var element1= document.createElement("input");
var element1.type="text";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var element2.type="text";
cell1.appendChild(element2);
var cell2=row.insertCell(2);
var element3.type="text";
cell1.appendChild(element3);
rowCount++;
}
}
function removeRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
table.deletRow(rowCount);
rowCount--;
}
}
You have several errors, but here is the basic working model. I think you should be able to sort it out from here
http://jsfiddle.net/dBzkX/
function addRow() {
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
//You declared var in front of the same variable twice. Don't do that.
//You were appending cells inside existing cell. Add them to row instead.
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement('input');
element1.type="text";
cell1.appendChild(element1);
row.insertCell(1);
row.insertCell(2);
}
}
function removeRow(){
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
//you had type in deletRow. Also, you can pass in -1 to remove the last row
table.deleteRow(-1);
}
}
The error is here:
var element1= document.createElement("input");
var element1.type="text";
It should be
var element1= document.createElement("input");
element1.type="text";
and similar for the other elements.
You declare the variable with
var element1 = 'something';
and then access it with
element1 = 'something different';
Also there is a typo in
var cel1=row.insertCell(0);
It needs to be
var cell1=row.insertCell(0);
Additionally you did not define element 2 and 3,
used cell2 twice where it should be cell2 and cell3 and only appended to cell1.