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);
}
}