Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this?
Below is the code for my dynamic table where I need to apply CSS on "td" click and also trigger a click event.
var tableid=0;
// display table.......
$('#page').append("<center> <table id='tables' cellspacing='50px' style='margin-top:70px' >");
for(var j=0;j<row;j++){
$('#tables').append("<tr class='row' id='row"+j+"' style='margin-bottom:50px'>");
for(var k=0;k<5;k++){
if(tableid<tablecount-1){
$("#row"+j).append("<td id='"+tableid+"' class='button' width='150' height='150' background='images/green.png' align='center'>"+
"</td>");
tableid++;
}
}//for ends.
$('#tables').append("</tr'>");
}//for ends
$('#page').append("</center> </table>");
I need to trigger events individually for each td element. When clicked, a function should be called passing the unique id as a parameter. The following commented code shows the methods I have attempted so far without success.
/*Event.observe(window, 'load', function(){
$('#TBL00001').observe('click', test());
});
function test(){
alert("click :)))");
}
$("'#"+tableCode[tableid]+"'").live(function() {
alert("Table"+tableCode[tableid]);
});
$("'#"+tableCode[tableid]+"'").click(function() {
alert("Table"+tableCode[tableid]);
});
$('#TBL00001').on( 'click', 'td', function() {
alert("Table"+tableCode[tableid]);});
*/
I have also tried using .delegate() which works but I'm unable to pass a unique id for each td element.
$('.button').each(function(){
$(this).click(function{
alert("hi");
});
});
$("tr .row > td .button").each(function() {
var $this = $(this);
alert("hi"+$this);
}
/*$("table").delegate($(this),"click",function(){
alert($(this));
printBill(tabid);
});