jQuery动态表。 为每个单元格添加一个div以使其可拖动

Question

我正在尝试使用JQuery创建动态表。

现在，我希望每个单元格都为一个div，但是我不确定应该如何去做。

我的最终目标是希望每个元素都是可拖动的，并将它们更改为div似乎是个好主意。

请提出任何可行的方法或将每个单元格更改为div的建议，以便可以将其拖动。

这是相关的代码。

//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

只是为了回答这个。 我做了以下操作，将div添加到表中。

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

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