Question

该表是使用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>

Answer 1

您可以在创建表格后调用$( "#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>

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

1 个答案: