Question

我试图选择下面的表格 - myTable - 它嵌套在几个div中。

以下是Chrome中元素面板的屏幕截图：

我尝试使用以下内容无效：


    $('#myTable').tablesorter();
    $('table#myTable').tablesorter();

    <html lang="en">
      <head>
        <title>Beverly Bonus Dashboard</title>
        <script type="text/javascript" src="../js/jquery/js/jquery-min.js"></script>
        <script type="text/javascript" src="../js/jquery/js/jquery-ui.js"></script>
        <script type="text/javascript" src="../js/jquery/tablesorter/jquery.tablesorter.js"></script>
        <script type="text/javascript" src="../js/central.js"></script>
        <link type="text/css" href="../js/jquery/css/tpurple/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
      </head>
      <? if ($isDelegate == "true") { ?>
      <body>
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Administration</a></li>
          </ul>
          <div id="tabs-1">
            <p>Tab 1 content</p>
          </div>
          <div id="tabs-2">
            <p>Tab 2 content</p>
          </div>
          <div id="tabs-3">
            <button id="button_showUsers" value="<?=$centreID; ?>">Show Users</button>
            <button id="button_addUsers" value="<?=$centreID; ?>">Add Users</button>
            <button id="button_removeUsers">Remove Users</button>       
            <br>
            <div id="users"></div>               
          </div>
        </div>   
      </body>
      <? }//end if isDelegate 
      else {
        echo $fullName .", You do not have permission to view this page";
      }
      ?>  
    </html>

file：central.js

<pre>
    $(document).ready(function(){
      //Tabs
      $('#tabs').tabs({ spinner: 'Retrieving data...' });
      //Buttons
      $("button").button();     
      //Dialog Box 
      $('#dialog').dialog()
      //error messages
      var $error_1 = $('<div></div>')
        .html("You Do Not Have Permission To View This Site.")
        .dialog({autoOpen: false, title: 'Error'});  
       $('#myTable.tablesorter').tablesorter();

      //site stuff
      $("#button_showUsers").click(function(){
        //get the centre id
        var ID = $(this).val();
        //echo out the delegates based on the centre ID
        $.getJSON("../php/show_delegates.php", {  centreID: ID }, function(data) { 
          $("#users").html("");
          var tbl ="<table id='myTable' class='tablesorter'><thead><tr><td>AGS</td><td>Name</td><td>Centre ID</td><td>Start Date</td><td>End Date</td></tr></thead><tbody>";
          $.each(data.delegates, function(key, val) {
            tbl = tbl 
            +"<tr>"
            +"<td>"+val.ags+"</td>"
            +"<td>"+val.full_name+"</td>"
            +"<td>"+val.centre_id+"</td>" 
            +"<td>"+val.start_date+"</td>"
            +"<td>"+val.end_date+"</td>"
            +"</tr>";
          });//end each
          tbl = tbl
          +"</tbody></table>";   
        $("#users").append(tbl);
        })//end getJSON 
      }); //button_showUsers

      $("#button_addUsers").click(function(){
        //get the centre id
        var ID = $(this).val();  
        $("#users").html("");
        var tbl ="<table id='myTable' class='tablesorter'><thead><tr><td>AGS</td><td>Name</td><td>Centre ID</td><td>Start Date</td><td>End Date</td></tr></thead><tbody>"
        +"<tr>"
        +"<td><input type=text id='ags'maxlength='8'></input></td>"
        +"<td></td>"
        +"<td></td>"
        +"<td></td>"        
        +"<td></td>"    
        +"</tr></tbody></table>";   
        $("#users").append(tbl);
      }); //button_addUsers

      //log user out when window closes
      $(window).unload( function () { 
         $.get("../php/logout.php", function(data) { }); 
         alert("Bye now!");
      });//end unload

        //log user out when window closes
      $(window).load( function () { 
        $.get("../php/user_details.php", function(data) { }); 
         //alert("Bye now!");
      });//end unload


    }); //end (document).ready

感谢任何指导。

Answer 1

它应该工作。

可能是你在加载html之前发起了调用$（'＃myTable'）。尝试在document.ready（）
您显示的html稍后会使用ajax调用加载到该页面。在这种情况下，您需要在ajax调用之后初始化tablesorter。
或者你有一个具有相同id的元素，之前在html中，因此它失败了。在控制台中尝试$（'＃myTable'）并检查它是否返回正确的元素。

Answer 2

尝试使用以下内容：

$('#myTable.tablesorter').tablesorter();

或

$('#myTable .tablesorter').tablesorter();

Answer 3

1）保持你的Html原样。

2）包括最新的Jquery，Jquery UI和jquery.tablesorter.js java脚本文件以及Jquery UI样式表。

3）替换以下Javascript / JQuery：

function appendUserTable() {
            $("#users").html("");
            var strdata = "[{'ags':25,'full_name':'User1','central_id':1,'start_date':'01-01-2001','end_date':'12-31-2005'},{'ags':20,'full_name':'User2','central_id':2,'start_date':'05-01-2002','end_date':'12-31-2007'},{'ags':22,'full_name':'User3','central_id':3,'start_date':'06-05-2003','end_date':'12-31-2010'}]";
            var tbl = "<table id='myTable' class='tablesorter'><thead><tr><th>AGS</th><th>Name</th><th>Centre ID</th><th>Start Date</th><th>End Date</th></tr></thead><tbody>";
            var dataObject = eval('(' + strdata + ')');
            for (i in dataObject) {
                tbl = tbl + "<tr>" + "<td>" + dataObject[i]["ags"] + "</td>" + "<td>" + dataObject[i]["full_name"] + "</td>" + "<td>" + dataObject[i]["central_id"] + "</td>" + "<td>" + dataObject[i]["start_date"] + "</td>" + "<td>" + dataObject[i]["end_date"] + "</td>" + "</tr>";
            }
            tbl = tbl + "</tbody></table>";
            $("#users").append(tbl);

            if ($("#users").find("#myTable").length > 0) {
                $("#myTable").tablesorter();
            }
        }

        $(document).ready(function() {
            $("#tabs").tabs();
            //if Show User Button Clicked
            $("#tabs-3 #button_showUsers").click(function() {
                //get the centre id
                // var ID = $(this).val();  
                //Append User Table Sorter
                appendUserTable();
            });
            //if Add User Button Clicked
            $("#tabs-3 #button_addUsers").click(function() {
                //get the centre id
                // var ID = $(this).val();  
                //Append User Table Sorter
                appendUserTable();
            });
            //Place other Login/Logout Script Here...
        }); //End of document ready

4）为可排序表添加以下CSS

table.tablesorter {
  background-color: #CDCDCD;
  font-family: arial;
  font-size: 8pt;
  margin: 10px 0 15px;
  text-align: left;
  width: 100%;
}
table.tablesorter thead tr .header {
  background-image: url("http://tablesorter.com/themes/blue/bg.gif");
  background-position: right center;
  background-repeat: no-repeat;
  cursor: pointer;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #E6EEEE;
  border: 1px solid #FFFFFF;
  font-size: 8pt;
  padding: 4px;
}
table.tablesorter {
  font-family: arial;
  font-size: 8pt;
  text-align: left;
}

也可以在codebins上试试这个。 http://codebins.com/codes/home/4ldqpbr

如何在一两个div中选择表id？

3 个答案: