Как сделать перетаскиваемые ячейки внутри таблицы

Эта таблица генерируется динамически с помощью функции JS. Мне нужно, чтобы у него были недоступные ячейки. Функция jQuery не будет работать над этим.Как сделать перетаскиваемые ячейки внутри таблицы

После создания ячеек они принадлежат к div с id = "table".

Как получить доступ к ячейкам?

<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

Edited, чтобы попытаться найти вопрос среди текста. – 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

Как сделать перетаскиваемые ячейки внутри таблицы

ответ

Смежные вопросы