个人中心
gpt4 book ai didi

javascript - 如何在 javascript 中调用 jQuery 插件类

转载 作者：行者123 更新时间：2023-12-02 16:40:23 26 4
gpt4 key购买 nike

我想使用 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。按以下方式更改您的代码:-

  1. 在最后的 else 条件之后删除 document.getElementById("results").innerHTML= divText;

  2. 粘贴此代码:-

    var divText2 = $(divText);
    divText2.tablesorter();
    $("#results").append(divText2);

<强> Working fiddle example

关于javascript - 如何在 javascript 中调用 jQuery 插件类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27562394/

26 4 0
文章推荐： javascript - 如何在平移时加载和销毁 map 而不是在加载时完全加载 map
文章推荐： javascript - Easeljs - 触摸事件在平板电脑和 Android 中不起作用 - 但为什么
文章推荐： javascript - 在 onclick 上创建并保存 cookie
文章推荐： javascript - Q - Javascript promise 等待数组被填充
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com