我想使用 Tablesort jQuery 插件对表格进行排序。
我的 html 有一个 select 标签，在更改任何选项时，它会从 my.js 调用 searchXML() 函数..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Select an option:
<select onchange="searchXML()" id="input">
<option></option>
<option value="milk">Milk</option>
<option value="tea">Tea</option>
<option value="sugar">Sugar</option>
<option value="juice">Juice</option>
<option value="all">All</option>
</select>
<br />
<div id="results">
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/my.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
</body>
</html>
我的 JavaScript，将显示一个表格。但我想使用 Tablesort 插件向我的表添加排序功能，因此我将 class="tablesorter"添加到我的表标记中。但表排序器不工作...
var product=[];
var quantity=[];
var date=[];
var grossprice=[];
var profit=[];
var divText=[];
function searchXML()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("ProductName");
input = document.getElementById("input").value;
size = input.length;
divText=""
if (input == "")
{
document.getElementById("results").innerHTML= "Please select a Product Name!";
return false;
}
if (input === "all")
{
var y=xmlDoc.getElementsByTagName("entry");
for (i=0;i<y.length;i++)
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
if (divText==="")
{
divText="<h2>The product details are:</h2><br /><table border=1 class=\"tablesorter\">";
divText+="<tr><th width=150>Date</th><th width=150>Product</th><th width=200>Quantity</th><th width=200>Gross Price</th><th width=200>Profit</th></tr>";
}
divText += "<tr><td width=150 align=center>" + date + "</td><td width=150 align=center>" + product + "</td><td width=200 align=center>" + quantity + "</td><td width=200 align=center>" + grossprice + "</td><td width=200 align=center>" + profit + "</td></tr>";
}
}
for (i=0;i<x.length;i++)
{
startString = x[i].childNodes[0].nodeValue;
if (startString.toLowerCase() == input.toLowerCase())
{
date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
if (divText==="")
{
divText="<h2>The product details are:</h2><br /><table border=1 class=\"tablesorter\">";
divText+="<tr><th width=150>Date</th><th width=150>Product</th><th width=200>Quantity</th><th width=200>Gross Price</th><th width=200>Profit</th></tr>";
}
divText += "<tr><td width=150 align=center>" + date + "</td><td width=150 align=center>" + product + "</td><td width=200 align=center>" + quantity + "</td><td width=200 align=center>" + grossprice + "</td><td width=200 align=center>" + profit + "</td></tr>";
}
}
if (divText=="")
{
divText = "<h2>The product does not exist.</h2>";
}
else
{
divText+="</table>";
}
document.getElementById("results").innerHTML= divText;
}
divText2=$(divText);
divText2.tablesorter();
我的xml
<?xml version="1.0" encoding="UTF-8"?>
<item>
<entry>
<ProductName>milk</ProductName>
<Date>2/10/2007</Date>
<Quantity>20</Quantity>
<GrossPrice>100</GrossPrice>
<Profit>20</Profit>
</entry>
<entry>
<ProductName>sugar</ProductName>
<Date>2/09/2009</Date>
<Quantity>45</Quantity>
<GrossPrice>1000</GrossPrice>
<Profit>100</Profit>
</entry>
<entry>
<ProductName>sugar</ProductName>
<Date>2/09/2010</Date>
<Quantity>40</Quantity>
<GrossPrice>600</GrossPrice>
<Profit>50</Profit>
</entry>
<entry>
<ProductName>milk</ProductName>
<Date>1/01/2001</Date>
<Quantity>10</Quantity>
<GrossPrice>50</GrossPrice>
<Profit>10</Profit>
</entry>
<entry>
<ProductName>tea</ProductName>
<Date>2/09/2009</Date>
<Quantity>45</Quantity>
<GrossPrice>1000</GrossPrice>
<Profit>100</Profit>
</entry>
<entry>
<ProductName>tea</ProductName>
<Date>2/09/2010</Date>
<Quantity>4</Quantity>
<GrossPrice>10</GrossPrice>
<Profit>1</Profit>
</entry>
<entry>
<ProductName>juice</ProductName>
<Date>2/09/2014</Date>
<Quantity>40</Quantity>
<GrossPrice>1000</GrossPrice>
<Profit>100</Profit>
</entry>
</item>
如何解决这个问题？谢谢您
最佳答案
divText="<h2>The product details are:</h2><br /><table border=1 class="tablesorter">";
应该是:
divText="<h2>The product details are:</h2><br /><table border=1 class=\"tablesorter\">";
您正在附加 divText 并且已将 tablesorter() 应用于 divText2。按以下方式更改您的代码:-
在最后的 else 条件之后删除
document.getElementById("results").innerHTML= divText;粘贴此代码:-
var divText2 = $(divText); divText2.tablesorter(); $("#results").append(divText2);
关于javascript - 如何在 javascript 中调用 jQuery 插件类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27562394/