如何在表格中制作可拖动的单元格

该表格是使用JS函数动态生成的。我需要它拥有可投掷的单元格。 jQuery函数在这个上不起作用。如何在表格中制作可拖动的单元格

单元格生成后，它们属于id = "table"的div。

如何访问单元格？

<body> 
<form> 
Rows: <input type="text" id="input1" /> 
Columns:<input type="text" id="input2" /> 
<input type="button" value="Generate" onclick='generateTable();'></input> 
</form> 
<div id="table"></div> 
<script type="text/javascript"> 
    function generateTable() { 
     var rows= document.getElementById("input1").value; 
     var columns= document.getElementById("input2").value; 

     var r= parseInt(rreshta); 
     var c= parseInt(kolona); 

     var theader = '<table>\n'; 
     var tbody = ""; 

     for(i= 0; i < r; i++){ 
     tbody += '<tr>'; 

     for (j = 0; j< c; j++){     
      tbody += '<td id = "cell" class= "freeCell">'; 
      tbody += 'Cell: ' + i + ',' + j; 
      tbody += '</td>'; 
     } 
    tbody += '</tr>\n'; 
    } 
    var tfooter = '</table>'; 
    document.getElementById("table").innerHTML = theader + tbody + tfooter; 

    } 

$(function() { 
$("#table td").draggable(); 
    }); 
    </script 
</body> 
</html>

来源

2016-11-16 Hermione

编辑试图在文字之间找到一个问题。 – jwpfox

[DataTables]（https://datatables.net/）插件使其变得简单。 – zer00ne

创建表后，您可以调用$("#table td").draggable();。

function generateTable() { 
 
     var rows= document.getElementById("input1").value; 
 
     var columns= document.getElementById("input2").value; 
 

 
     var r= parseInt(rows); 
 
     var c= parseInt(columns); 
 

 
     var theader = '<table>\n'; 
 
     var tbody = ""; 
 

 
     for(i= 0; i < r; i++){ 
 
     tbody += '<tr>'; 
 

 
     for (j = 0; j< c; j++){     
 
      tbody += '<td id = "cell" class= "freeCell">'; 
 
      tbody += 'Cell: ' + i + ',' + j; 
 
      tbody += '</td>'; 
 
     } 
 
    tbody += '</tr>\n'; 
 
    } 
 
    var tfooter = '</table>'; 
 
    document.getElementById("table").innerHTML = theader + tbody + tfooter; 
 
    $("#table td").draggable(); 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<form> 
 
Rows: <input type="text" id="input1" /> 
 
Columns:<input type="text" id="input2" /> 
 
<input type="button" value="Generate" onclick='generateTable();'></input> 
 
</form> 
 
<div id="table"></div>

来源

2016-11-16 21:19:03

谢谢！它实际上工作 – Hermione

如何在表格中制作可拖动的单元格

回答

相关问题