テーブル内のドラッグ・セルを作成する方法

この表は、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

テーブル内のドラッグ・セルを作成する方法

答えて

関連する問題