Jquery Dynamic Table. Adding a div for each cell to make it draggable

huanaerelya

New Member
I am trying to create a dynamic table using JQuery.Right now, I want each cell to be a divbut I am not sure how I should go about doing it.My ultimate goal is wanting each element to be draggable and changing them to be a div seems like a good idea.Please do suggest any possible ways of doing it or how I could go about changing each cell to be a div so I could make it draggable.This are the relevant codes.\[code\]//create table functionfunction createDynamicTable(tbody, rows, cols) {if(tbody == null || tbody.length < 1) return;for(var r=1; r<=rows; r++){ var trow=$("<tr>"); for(var c=1; c<=cols; c++){//first column data if (c==1){ if(r==1){ $("<td>") .addClass("tableCell") .text("Subject") .data("col", c) .appendTo(trow); } if(r==2){ $("<td>") .addClass("tableCell") .text("Monday") .data("col", c) .appendTo(trow); } if(r==3){ $("<td>") .addClass("tableCell") .text("Tuesday") .data("col", c) .appendTo(trow); } if(r==4){ $("<td>") .addClass("tableCell") .text("Wednesday") .data("col", c) .appendTo(trow); } if(r==5){ $("<td>") .addClass("tableCell") .text("Thursday") .data("col", c) .appendTo(trow); } if(r==6){ $("<td>") .addClass("tableCell") .text("Friday") .data("col", c) .appendTo(trow); } if(r==7){ $("<td>") .addClass("tableCell") .text("Saturday") .data("col", c) .appendTo(trow); } if(r==8){ $("<td>") .addClass("tableCell") .text("Sunday") .data("col", c) .appendTo(trow); } } else{ //for first row if(r==1){ if(c==2){ $("<td>") .addClass("tableCell") .text("101") .data("col", c) .appendTo(trow); } if(c==3){ $("<td>") .addClass("tableCell") .text("102") .data("col", c) .appendTo(trow); } if(c==4){ $("<td>") .addClass("tableCell") .text("103") .data("col", c) .appendTo(trow); } if(c==5){ $("<td>") .addClass("tableCell") .text("104") .data("col", c) .appendTo(trow); } if(c==6){ $("<td>") .addClass("tableCell") .text("105") .data("col", c) .appendTo(trow); } } else{ var cellText = "Cell " + r + "." + c $("<td>") .addClass("tableCell") .text(cellText) .data("col", c) .appendTo(trow); }} } trow.appendTo(tbody); } }\[/code\]
 
Back
Top