Question

I am trying to create a dynamic table using JQuery.

Right now, I want each cell to be a div
but 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.

//create table function
function 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);
  } 
}

Answer 1

Just to answer this.
I did the following to add a div into the table.

 var tcol=$("<td>")
        $("<div>")
            .addClass("Div1")
            .text("Div works")
            .appendTo(tcol);

            $(tcol)
            .addClass("TableCell")
            //.text("101")
            .data("Col",c)
            .appendTo(trow);