0

我正在尝试使用 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);
  } 
}
4

1 回答 1

0

只是为了回答这个问题。我执行以下操作将 div 添加到表中。

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

            $(tcol)
            .addClass("TableCell")
            //.text("101")
            .data("Col",c)
            .appendTo(trow);
于 2012-12-09T14:38:21.817 回答