Good evening!
I am making a Javascript auto-generated calendar for a school assignment. The basic creation has succeeded, but the next assignment is to be able to add appointments into the calendar by pressing a "day".
This is where my problem starts. I made a simple function and tried adding that function as an onclick event to my elements being generated, as you can see in my code below.
Problem is that when I click an element, nothing happens! I tried using a dummy function like alert("it worked"), but still no result.
Can anyone help me with this question?
My code:
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="kalender.js"></script>
<title>Auto-gen kalender</title>
<style type="text/css">
.td, tr
{
border-color: red;
border-width: 5px;
font-family:'Bookman Old Style';
}
.table
{
background-color: grey;
color: darkred;
}
.body
{
background-color: lightgray;
}
</style>
</head>
<body>
</body>
</html>
Javascript:
// HOW
function MaakAfspraak() {
alert("afspraak gemaakt");
}
function Dag_Titel(dag_naam)
{
document.write("<td width=40>" + dag_naam + "</td>");
}
function VulTabel(maand, maand_length)
{
dag = 1;
//beginnen met tabel + berg vars, dag hieboven is belangrijk
document.write("<table border=5 cellspacing=3 cellpadding=%3><tr>");
document.write("<td align=center colspan=7><b>" + maand + " " + jaar + "</b><tr>");
Dag_Titel("Zo");
Dag_Titel("Ma");
Dag_Titel("Di");
Dag_Titel("Wo");
Dag_Titel("Do");
Dag_Titel("Vr");
Dag_Titel("Za");
// dit zijn de lege cellen voor het begin van een maand
document.write("</tr><tr>")
for (var i=1; i<start_dag; i++)
{
document.write("<td onclick=´MaakAfspraak()´>");
}
// 1ste week van een maand
for (var i=start_dag; i < 8; i++)
{
document.write("<td align=center onclick=´MaakAfspraak()´>" + dag + "</td>");
dag++;
}
document.write("<tr>");
// rest van de weken
while (dag <= maand_length)
{
for (var i = 1; i <= 7 && dag <= maand_length; i++)
{
document.write("<td align=center onclick=´MaakAfspraak()´>" + dag + "</td>");
dag++;
}
document.write("</tr><tr>")
// hieronder de 1ste dag voor de volgende maand zodat we alles kunnen vullen
start_dag = i;
}
document.write("</tr></table></ br>")
}
// eerste dag van nieuwe jaar en meer shiz
jaar = 2014;
vandaag = new Date("Januari 1, " + 2014)
start_dag = vandaag.getDay() + 1;
VulTabel("Januari", 31);
VulTabel("Februari", 29);
VulTabel("Maart", 31);
VulTabel("April", 30);
VulTabel("Mei", 31);
VulTabel("Juni", 30);
VulTabel("Juli", 31);
VulTabel("Augustus", 31);
VulTabel("September", 30);
VulTabel("Oktober", 31);
VulTabel("November", 30);
VulTabel("December", 31);
//end
Turns out I was using the wrong type of qoutes for my onclick function call. Thanks #KevinB!
Don't use document.write. Instead, create your elements using the DOM (which is much faster) and then add the event via addEventListener:
//Create it
var td = document.createElement( "td" );
//Add to tr
tr.appendChild( td );
//Add event
td.addEventListener( "click", MaakAfspraak, false );
Related
I' ve been stuck on a problem for a while and I need your help.
So I am trying to make a multiplication game that is asking a user for an answer so long until he puts 'x' as an answer. (so x is the only answer to end the game). And also the game needs guess counter so when the game finishes the site puts out how many answers were correct and how many were inccorrect and he also get the percantage of succes.
thanks for the help.
<html>
<head>
</head>
<title> Preizkusi svoje znanje poštevanke! </title>
<body>
<p> Pozdravljeni, ste pripravljeni preizkusiti svoje znanje poštevanke?</p>
<script type="text/javascript">
// ime datoteke:avto.html
// avtor:Matic Molka
//Program, ki izbere naključni števili med 1 in 10 ter uporabnika vpraša po njunem zmnožku ter preveri pravilnost uporabnikovega odgovora
//Vhodni podatki: naključni števili, ki jih zgenerira računalnik in uporabnikov odgovor
//Izhodni podatki: uporabniku vrne odgovor glede na to ali je odgovor pravilen (čestitamo) ali napačen (narobe)
//Deklariramo in inicializiramo spremenljivke in preverimo njihovo delovanje
var nakljucna_st1 = Math.floor(Math.random() * 10);
//document.write('<p>'+ nakljucna_st1 + '</p>');
var nakljucna_st2 = Math.floor(Math.random() * 10);
//document.write('<p>'+ nakljucna_st2 + '</p>');
var zmnožek = nakljucna_st1 * nakljucna_st2
//document.write('<p>'+ zmnožek + '</p>'); // to je rezultat (zmnožek) prve in druge naključne stevilke
var odgovor = prompt('Koliko je zmnožek ' + nakljucna_st1 + ' in ' + nakljucna_st2 + '?');
if(zmnožek == odgovor){
document.write('<font color="green"><h1>Čestitamo!</h1></font>');
}
else{
document.write('<font color="red"><h1>Napačno!</h1></font>');
}
</script>
</body>
</html>
I have this JavaScript html code for getting the tabular format output. I am giving XML data as input to the script.
function myFunction() {
parser=new DOMParser();
xmlDoc=parser.parseFromString(
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
+"<book>"+
"<title>The Time Machine and Other Stories</title>"+
"<author_name>H. G. Wells</author_name>"+
"<publish_date>2016</publish_date>"+
"<cost currency=\"USD\">10</cost>"+
"<publisher_info>"+
"<publisher_name>Read Books Ltd</publisher_name>"+
"<publisher_address>"+
"<street_name>Evesham street</street_name>"+
"<city>Worcestershire</city>"+
"<zip_code>11WR</zip_code>"+
"<country>United Kingdom</country>"+
"</publisher_address>"+
"</publisher_info>"+
"</book>","text/xml");
var x=xmlDoc.getElementsByTagName("publisher_address");
for (i=0;i<x.length;i++) {
document.write("<tr>");
var y=x[i].childNodes;
for (j=0;j<y.length;j++) {
document.write("<td>"+ y[j].childNodes[0].nodeValue+ "</td>");
}
document.write("</tr>");
}
}
table, th, td {
border: 1px solid black;
}
<h1>My First XML Parsing JavaScript</h1>
<p>Click the button to display book info.</p>
<p id="demo"></p>
<button type="button" onclick="myFunction()">Try it</button>
<table border="0">
</table>
The output I am getting is:
Evesham streetWorcestershire11WRUnited Kingdom
Can anyone help me why I am not able to get output in tabular format?
You are using document.write()which does not gives you expected output.
Use createElement to create a table, fill the data by creating rows, and td's and append to your dom or your paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>My First XML Parsing JavaScript</h1>
<p>Click the button to display book info.</p>
<p id="demo"></p>
<button type="button" onclick="myFunction()">Try it</button>
<table border="0">
<script>
function myFunction() {
parser = new DOMParser();
xmlDoc = parser.parseFromString(
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
"<book>" +
"<title>The Time Machine and Other Stories</title>" +
"<author_name>H. G. Wells</author_name>" +
"<publish_date>2016</publish_date>" +
"<cost currency=\"USD\">10</cost>" +
"<publisher_info>" +
"<publisher_name>Read Books Ltd</publisher_name>" +
"<publisher_address>" +
"<street_name>Evesham street</street_name>" +
"<city>Worcestershire</city>" +
"<zip_code>11WR</zip_code>" +
"<country>United Kingdom</country>" +
"</publisher_address>" +
"</publisher_info>" +
"</book>", "text/xml");
// creating a table
table = document.createElement('table');
var x = xmlDoc.getElementsByTagName("publisher_address");
for (i = 0; i < x.length; i++) {
// create a row
var tr = table.insertRow();
var y = x[i].childNodes;
for (j = 0; j < y.length; j++) {
// crate a cell for your data
var td = tr.insertCell();
// put the data into your td
td.innerHTML = y[j].childNodes[0].nodeValue;
}
}
// append it to body, or to your p#demo
document.body.appendChild(table);
}
</script>
</table>
</body>
</html>
You need to give your table a container with an ID to hook to:
<table>
<tbody id="my-table-contents"></tbody>
</table>
Then in your javascript you can append to that container.
<script>
var myTable = document.getElementById('my-table-contents');
function myFunction() {
parser = new DOMParser();
xmlDoc = parser.parseFromString(
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
"<book>" +
"<title>The Time Machine and Other Stories</title>" +
"<author_name>H. G. Wells</author_name>" +
"<publish_date>2016</publish_date>" +
"<cost currency=\"USD\">10</cost>" +
"<publisher_info>" +
"<publisher_name>Read Books Ltd</publisher_name>" +
"<publisher_address>" +
"<street_name>Evesham street</street_name>" +
"<city>Worcestershire</city>" +
"<zip_code>11WR</zip_code>" +
"<country>United Kingdom</country>" +
"</publisher_address>" +
"</publisher_info>" +
"</book>", "text/xml");
var x = xmlDoc.getElementsByTagName("publisher_address");
for (i = 0; i < x.length; i++) {
myTable.innerHtml += "<tr>";
var y = x[i].childNodes;
for (j = 0; j < y.length; j++) {
myTable.innerHtml += "<td>" + y[j].childNodes[0].nodeValue + "</td>";
}
myTable.innerHtml += "</tr>";
}
}
</script>
I have a problem with keeping sliders in sync.
Sliders preview
If I +1 on one of the four sliders, then the others must be substracted with 1/3.
What is the best way to perform this action?
I tried through Javascript already but can't come up with a working code. The selected slider does change value, but the 3 others give weird numbers.
The oninput() method is called when changing one of the sliders. When selecting a sliders and pressing the arrows keys to change the value then nothing happens. When drag and dropping a new value on the slider, also nothing happens. Only when sliding very rapidly.
When clicking on a new value on the slider, it does work somehow..
What am I doing wrong here?
this is the whole function, some variables are written in Dutch...
Code preview:
function showValueSub(sliderValue, parent, aantalKinderen, totaalbedragCategorie, echteParentId, teller, aantalSiblings, opgeroepenDoorHoofdCategorie) {
/*
het labeltje onder de afbeelding van de hoofdcategorie moet niet meer worden aangepast.
document.getElementById("subcat" + range).innerHTML = newValue + " Euro";
##
Parameters:
parent=het begrotingsId van het huidig element.
echteParentId= het begrotingsId van de parent
##
*/
//alert('test');
//###################################################################################################################################################
//#LOOPEN OVER DE SIBLINGS
//enkel loopen over siblings als deze functie wordt uitgevoerd door huidig element, en niet de parent.
//eerst het outputelement onder de slider aanpassen
var siblingElement = document.getElementById(echteParentId + "input" + teller);
if (siblingElement != null) var siblingSlider = parseInt(siblingElement.getAttribute("onchangeviaparent"));
if (siblingElement != null && siblingSlider != 1) {
//als het niet is opgeroepen door een hoofdcategorie: dan output en input aanpasen van huidig element
var huidigOutputElement = document.getElementById(echteParentId + "output" + teller);
huidigOutputElement.innerText = sliderValue;
var aantalAanpasbareSiblings = 0;
var teVerdelenBedragSiblings = 0;
for (var i = 0; i < aantalSiblings - 1; i++) {
var siblingElement = document.getElementById(echteParentId + "." + i);
//tellen hoeveel kindelementen er zijn die aanpasbaar zijn.
if (siblingElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR")
aantalAanpasbareSiblings++;
}
if (aantalAanpasbareSiblings == 0) aantalAanpasbareSiblings = 1;
if (vorigeSliderValueSibling != null)
teVerdelenBedragSiblings = (sliderValue - vorigeSliderValueSibling) / aantalAanpasbareSiblings; //te verdelen bedrag per aanpasbaar siblingElement
else
teVerdelenBedragSiblings = Math.round(sliderValue / aantalAanpasbareSiblings).toFixed(2); //te verdelen bedrag per aanpasbaar siblingElement
for (var i = 0; i < aantalSiblings; i++) {
//het huidig subelement mag niet aangepast worden, checken met een if.
var siblingElement = document.getElementById(echteParentId + "." + i);
if (siblingElement != document.getElementById(echteParentId + "." + teller)) {
if (siblingElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR") {
//in het p element staat een bedrag + de string "EURO".
//eigen p element ophalen
var siblingElementMetBedrag = document.getElementById(echteParentId + "." + i + "p");
var bedrag = parseFloat(siblingElementMetBedrag.innerHTML.substring(0, siblingElementMetBedrag.innerHTML.length - 5).trim());
bedrag -= teVerdelenBedragSiblings; //aftrekken ipv optellen
siblingElementMetBedrag.innerHTML = Math.round(bedrag).toFixed(2) + " Euro";
//siblinginput(slider) element ophalen en proberen aan te passen
var siblingSliderElement = document.getElementById(echteParentId + "input" + i);
if (siblingSliderElement != null) siblingSliderElement.value = Math.round(siblingSliderElement.value - teVerdelenBedragSiblings).toFixed(2);
//output van sibling aanpassen
var siblingSliderOutput =document.getElementById(echteParentId + "output" + i);
if (siblingSliderOutput != null)
siblingSliderOutput.value = Math.round(siblingSliderOutput.value - teVerdelenBedragSiblings).toFixed(2);
}
}
}
}
vorigeSliderValueSibling = sliderValue;
//###################################################################################################################################################
//#LOPEN OVER DE KINDEREN.
var aantalAanpasbareKinderen = 0;
for (var i = 0; i < aantalKinderen; i++) {
var kindElement = document.getElementById(parent + "." + i);
//tellen hoeveel kindelementen er zijn die aanpasbaar zijn.
if (kindElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR")
aantalAanpasbareKinderen++;
}
//als er geen aanpasbarekinderen gevonden zijn, deze standaard op 1 zetten want
//delen door 0 gaat niet.
if (aantalAanpasbareKinderen == 0) aantalAanpasbareKinderen = 1;
//checken of de slider al een keer is aangepast, zo ja huidig bedrag van de slider verminderen met vorige waarde van de slider
if (vorigeSliderValueSub != null)
teVerdelenBedrag = (sliderValue - vorigeSliderValueSub) / aantalAanpasbareKinderen; //te verdelen bedrag per aanpasbaar kindElement
else
teVerdelenBedrag = Math.round(sliderValue / aantalAanpasbareKinderen).toFixed(2); //te verdelen bedrag per aanpasbaar kindElement
for (var i = 0; i < aantalKinderen; i++) {
var kindElement = document.getElementById(parent + "." + i);
if (kindElement.getAttribute("categoriestatus") != "NIET_AANPASBAAR") {
//in het p element staat een bedrag + de string "EURO".
//eigen p element ophalen
var kindElementMetBedrag = document.getElementById(parent + "." + i + "p");
var bedrag = parseFloat(kindElementMetBedrag.innerHTML.substring(0, kindElementMetBedrag.innerHTML.length - 5).trim());
bedrag += teVerdelenBedrag;
kindElementMetBedrag.innerHTML = bedrag + " Euro";
//kindinput element ophalen en proberen aan te passen
var kindSliderElement = document.getElementById(parent + "input" + i);
if (kindSliderElement != null) kindSliderElement.value = sliderValue / aantalAanpasbareKinderen;
}
}
//###################################################################################################################################################
vorigeSliderValueSub = sliderValue;
//alert(siblingSlider.innerHTML);
if (siblingSlider != null) {
$("#" + echteParentId + "input" + teller).attr('onchangeviaparent', '0');
//siblingSlider.onchangeviaparent = '0';
//alert(parseInt(siblingSlider.getAttribute("onchangeviaparent")));
}
//document.getElementById(echteParentId + "." + teller).setAttribute("onchangeViaParent", "0");
//alert(document.getElementById(echteParentId + "input" + teller).getAttribute("onchangeViaParent"));
}
I'm running into a problem when trying to add in the search functionality, showList().
It seems to bog down the client so much that Chrome wants to kill the page each time I type into the input field. I'm clearly a novice JS writer, so could I be running an infinite loop somewhere I don't see? Also, any advice to get the search functionality working properly would be hugely appreciated. I don't think I'm using the correct selectors below for the show/hide if statement, but I can't think what else to use.
$(document).ready(function(){
showList();
searchBar();
});
function showList() {
$("#show-records").click(function(){
$.getJSON("data.json", function(data){
var json = data;
$("show-list").append("<table class='specialists'>")
for(var i = 0; i < json.length; i++) {
var obj = json[i],
tableFormat = "</td><td>";
$("#show-list").append("<tr><td class=1>" +
obj.FIELD1 + tableFormat +
obj.FIELD2 + tableFormat +
obj.FIELD3 + tableFormat +
obj.FIELD4 + tableFormat +
obj.FIELD5 + tableFormat +
obj.FIELD6 + tableFormat +
obj.FIELD7 + tableFormat +
obj.FIELD8 + "</td></tr>");
$("show-list").append("</table>");
}
//end getJSON inner function
});
//end click function
});
//end showList()
};
function searchBar() {
//AJAX getJSON
$.getJSON("data.json", function(data){
//gathering json Data, sticking it into var json
var json = data;
for(var i = 0; i < json.length; i++) {
//putting the json objects into var obj
var obj = json[i];
function contains(text_one, text_two) {
if (text_one.indexOf(text_two) != -1)
return true;
}
//whenever anything is entered into search bar...
$('#search').keyup(function(obj) {
//grab the search bar content values and...
var searchEntry = $(this).val().toLowerCase();
//grab each td and check to see if it contains the same contents as var searchEntry - if they dont match, hide; otherwise show
$("td").each(function() {
if (!contains($(this).text().toLowerCase(), searchEntry)) {
$(this).hide(400);
} else {
$(this).show(400);
};
})
})
}
});
};
body {
background-color: lightblue;
}
tr:first-child {
font-weight: bold;
}
td {
padding: 3px;
/*margin: 10px;*/
text-align: center;
}
td:nth-child(6) {
padding-left: 50px;
}
td:nth-child(7) {
padding-left: 10px;
padding-right: 10px;
}
#filter-count {
font-size: 12px;
}
<html>
<head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script language="javascript" src="process.js"></script>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<a href="#" id='show-records'>Show Records</a><br>
<label id="searchBar">Search: <input id="search" placeholder="Enter Specialist Name"></label>
<span id="search-count"></span>
<div id="show-list"></div>
</body>
</html>
Problem appears to be that you can't treat append as if it was a text editor and you are writing html.
Anything that gets inserted needs to be a proper element ... not a start tag, then some text...then a close tag.
We can however modify your code slightly to produce html strings and then add that at the end
$.getJSON("data.json", function(data){
var json = data;
var html="<table class='specialists'>")
for(var i = 0; i < json.length; i++) {
var obj = json[i],
tableFormat = "</td><td>";
html+= "<tr><td class=1>" +
obj.FIELD1 + tableFormat +
obj.FIELD2 + tableFormat +
obj.FIELD3 + tableFormat +
obj.FIELD4 + tableFormat +
obj.FIELD5 + tableFormat +
obj.FIELD6 + tableFormat +
obj.FIELD7 + tableFormat +
obj.FIELD8 + "</td></tr>";
}
html+= '</table>';
$("#show-list").html(html);
//end getJSON inner function
});
I´m having problems using the Jquery .datepicker plugin in a textbox, when generated using dynamic content (javascript), inside a php page.
Below is my current code. Please help me out finding how to enable Jquery Datepicker on it?
** All I need is an explanation on how shoud I alter the code in "i > 0 && j == 3" textbox creation part.
Thank You in Advance. (I know my code is terrible, I´m a rookie on it!)
<script type="text/javascript">
//Script para gerar os campos para preenchimentos parcelados
function gerarparcelas() {
// desabilitar botão Gerar parcelas ao rodar este script:
document.getElementById("gera_parcelas").disabled = true;
var descr_lancamento_02 = document.getElementById('descr_lancamento_02').value; //Pegar valor do campo descrição do lançamento
var valor_lancamento_02 = document.getElementById('valor_lancamento_02').value; //Pegar valor do campo valor do lançamento (total)
var data_vencimento_02 = document.getElementById('data_vencimento_02').value; //Pegar valor do campo data de vencimento (da 1 parcela)
var qtde_parcelas = document.getElementById('qtde_parcelas').value; //Pegar valor do campo quantidade de parcelas
//converter o número em REAIS digitado no campo em número americano para o sistema calcular:
valor_lancamento_02 = valor_lancamento_02.replace(/\./g,"");
valor_lancamento_02 = valor_lancamento_02.replace(",",".");
// vamos criar o elemento HTML table
var tabela = document.createElement("table");
tabela.width = "750px";
tabela.id = "table_parcela"
tabela.height = "250px";
tabela.border = "1px";
tabela.cellSpacing = "0px";
tabela.cellPadding = "2px";
// vamos criar o corpo da tabela, ou seja, o tbody
var corpo = document.createElement("tbody");
tabela.appendChild(corpo);
var linhas = qtde_parcelas;
linhas++;
// vamos criar quatro linhas contendo quatro células cada uma
for(var i = 0; i < linhas; i++){
var linha = corpo.insertRow(-1);
for(var j = 0; j < 4; j++){
var celula = linha.insertCell(-1);
if (i == 0 && j == 0) {
celula.innerHTML = "<td class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong></p>";
} else if (i == 0 && j == 1) {
celula.innerHTML = "<p class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong>Descrição do lançamento</strong></p>";
} else if (i == 0 && j == 2) {
celula.innerHTML = "<p class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong>Valor R$</strong></p>";
} else if (i == 0 && j == 3) {
celula.innerHTML = "<p class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong>Vencimento</strong></p>";
}
if (i > 0 && j == 0) {
id = i;
celula.innerHTML = id;
}
if (i > 0 && j == 1) {
celula.innerHTML = descr_lancamento_02;
celula.innerHTML="<input type='text' value='" +celula.innerHTML + " - " + id + "/" + qtde_parcelas + "' id='parcelamento_" + i +"_"+ j +"' size='55'>";
}
if (i > 0 && j == 2) {
celula.innerHTML = valor_lancamento_02;
var parcela = celula.innerHTML / qtde_parcelas;
// Reconvertendo o número de U$ para R$
var int = parseInt(parcela.toFixed(2).toString().replace(/[^\d]+/g, ''));
var tmp = int + '';
tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
if (tmp.length > 6)
tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
if (tmp.length > 9)
tmp = tmp.replace(/([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g,".$1.$2,$3");
if (tmp.length > 12)
tmp = tmp.replace(/([0-9]{3}).([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g,".$1.$2.$3,$4");
if(tmp.indexOf(".") == 0) tmp = tmp.replace(".","");
if(tmp.indexOf(",") == 0) tmp = tmp.replace(",","0,");
parcela = tmp;
// Fim da reconversão de moeda
celula.innerHTML="<input type='text' value='" + parcela + "' id='parcelamento_" + i +"_"+ j +"'>";
}
if (i > 0 && j == 3) {
// criar campo textbox com jquery para Datepicker:
celula.innerHTML = data_vencimento_02;
var $textbox_id = "parcelamento_" + i + "_" + j;
celula.innerHTML = "<input type='text' value='" + celula.innerHTML + "' id='" + $textbox_id + "'>";
$txtdatabox = celula.innerHTML;
$txtdatabox.datepicker(); //This line should be calling the plugin to have the new created textbox above to use Jquery?
}
}
}
// vamos anexar a tabela recém-criada a um elemento div
var $container = document.getElementById("container");
$container.appendChild(tabela);
$container.datepicker(); //Also tried this line to add Datepicker plugin...
}
</script>
You cannot call date picker on the body tag. You could at the end of all your code do
$(".dtp").each(function() {
$(this).datepicker();
}
if you give your inputs the class="dtp"