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

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

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

我尝试过使用以下选项，但没有效果：

$('#myTable').tablesorter(); $('table#myTable').tablesorter(); 文件：central.js

---

欢迎提供任何指导。

尝试使用以下方法：

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

或

它应该会起作用

可能是您在加载html之前启动了调用$'myTable'。尝试在document.ready中初始化tablesorter

稍后使用ajax调用将显示的html加载到页面中。在这种情况下，需要在ajax调用之后初始化tablesorter

或者您在html中的某个地方得到了一个id相同的元素，因此它失败了。在控制台中尝试$'myTable'并检查其是否返回正确的元素

---

1保持Html的原样

2包括最新的Jquery、Jquery UI和Jquery.tablesorter.js java脚本文件，还包括Jquery UI样式表

3替换以下Javascript/JQuery：

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上也试试这个

有错误吗？请发布我们需要知道的帮助调试的所有信息。确保id相同，并且没有其他id作为myTable，请在.ready handler中或在页面末尾编写代码。如果可以显示一些代码，请更好！既然这里没什么可谈的，我就继续问一个显而易见的问题。。。您的jQuery链接正确吗？否则，即使您有多个具有该id的div，您也会成功地选择该div。您只需将它们全部选择即可。谢谢您的回复。我正在努力研究如何发布代码。tablesorter是一个方法而不是一个类选择器。@根据OP提供的屏幕截图，未定义它也是该表的一个类。我已经更改了我的代码，添加了澄清这一点的方法。嘿，Jithin，我在控制台中尝试了$'myTable'，它返回了以下结果：您正在使用选择器获取正确的表。是吗？是的，第二点。正在执行$'myTable.tablesorter'.tablesorter；在此之前，ajax调用将无法工作，因为表尚未加载。您必须从那里将其剪切并粘贴到$users.appendtbl；放置$'myTable.tablesorter'.tablesorter；$users.appendtbl；之后；。它应该会起作用。

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

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

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

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;
}