Question

我正在尝试以下代码让每个td或每行都可以移动，例如拖放。好像它不接受jQuery的任何建议？

我已尝试在一个页面中执行所有代码，但仍无法正常工作

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <title>
      Jomana Sherif Presentation
    </title>
<link rel="stylesheet" type="text/css" href="first.css">
<!-- 
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
 -->

<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> </link>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
  #sortedtable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortedtable td { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortedtable ld{ position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( "#sortedtable" ).sortable();
    $( "#sortedtable" ).disableSelection();
  });
  </script>
  </head>
  <body bgcolor="#E6E6FA">
<?php

if(!$link = mysql_connect("localhost", "root", "")) {
     echo "Cannot connect to db server";
}
elseif(!mysql_select_db("Disney")) {
     echo "Cannot select database";
}
else {
     if(!$rs = mysql_query("SELECT * FROM DisneyCharacters")) {
          echo "Cannot parse query";
     }
     elseif(mysql_num_rows($rs) == 0) {
          echo "No records found";
     }
     else {
          echo "<table id=\"sortedtable\" class=\"bordered\" cellspacing=\"0\">\n";
          echo "<thead>\n<tr>";
          echo "<th>Name  </th>";
          echo "<th>Movie  </th>";
          echo "<th>Year  </th>";
          echo "</tr>\n</thead>\n";

          while($row = mysql_fetch_array($rs)) {
               echo "<tr>";
  echo "<td>" . $row['Name'] . "</td>";
  echo "<td>" . $row['Movie'] . "</td>";
  echo "<td>" . $row['Year'] . "</td>";

  echo "</tr>";

          }
          echo "</table><br />\n";
     }

}
?>

    </body>


</html>

Answer 1

您需要将可排序的初始化代码放入$(document).ready块。目前，它正在表格呈现在页面上之前执行：

<script>
$(document).ready(function () {
  $(function() {
    $( "#sortedtable" ).sortable();
    $( "#sortedtable" ).disableSelection();
  });
});
</script>

Answer 2

试试这个：

$(document).ready(function(){
 $( "#sortedtable" ).tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
 $( "tbody" ).sortable();
 $( "tbody" ).disableSelection();
});

工作小提琴：http://jsfiddle.net/robertrozas/LXjm6/

---------------------------------- EDIT ------------ -------------------------------

在head代码中：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>

如何拖放此表中的每一行？

2 个答案: