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 に答える