当前位置： 文江博客话题详情

使用原型表排序器类对 HTML 表中的 XML 数据进行排序

发布于 2024-10-06 08:59:17 字数 67 浏览 5 评论 0原文

任何人都可以向我展示使用 Prototype Table Sorter 类将 XML 数据放入 HTML 表中的示例吗？

原文

can anyone Show me example to put the XML data in a HTML table Using Prototype Table Sorter Class??

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

小草泠泠 2024-10-13 08:59:17

好吧，我终于提出了解决方案，希望对将来使用中需要它的人也有帮助
因此只需更改 XML 的名称：

xmlhttp.open("GET","[XML File and is path]",false);

然后使用循环 data3 正如你在我的例子中想要的那样：

var b= x[i].getElementsByTagName("bandwidth")[0].childNodes[0].nodeValue;
if (b==0) b="unlimited";

var type = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue+"-"+x[i].getElementsByTagName("wireless_type")[0].childNodes[0].nodeValue;

data3[i]=
{"Monthly_Charges": x[i].getElementsByTagName("charges")[0].childNodes[0].nodeValue, "Provider": x[i].getElementsByTagName("network")[0].childNodes[0].nodeValue, "Speed_(kbps)": x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue, "Bandwidth_(GB)": b, "Type": type, "Installation_charges": x[i].getElementsByTagName("install_charges")[0].childNodes[0].nodeValue}

因为我正在获取有关一些互联网包的数据，然后将其放入 Array/Json 表示法中以将其发送到原型表排序器类，因此你只需编辑它以供自己使用，并且数据...！！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Prototype Table Sorter Class : XML</title>
  <meta name="keywords" content="javascript, prototype, prototype.js, table sorter, table sorter prototype" />
  <meta name="description" content="Demo of TableOrderer a table sorter class for prototype.js" />

  <script type="text/javascript" language="JavaScript" src="js/prototype.js"></script>

  <script type="text/javascript" language="JavaScript" src="js/table_orderer.js"></script>

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/tableorderer.css" type="text/css" media="screen" />
<script type="text/javascript" language="JavaScript">
 // var sess=document.getElementById("sess").value;
if(window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
xmlhttp.open("GET","xml/[email protected]_internet.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

var x=xmlDoc.getElementsByTagName("Results");
var charg= x[0].getElementsByTagName("charges")[0].childNodes[0].nodeValue;

//alert(8);



var data3 = new Array(x.lengths);
for(i=0; i<x.length;i++)
{
var b= x[i].getElementsByTagName("bandwidth")[0].childNodes[0].nodeValue;
if (b==0) b="unlimited";

var type = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue+"-"+x[i].getElementsByTagName("wireless_type")[0].childNodes[0].nodeValue;

data3[i]=
{"Monthly_Charges": x[i].getElementsByTagName("charges")[0].childNodes[0].nodeValue, "Provider": x[i].getElementsByTagName("network")[0].childNodes[0].nodeValue, "Speed_(kbps)": x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue, "Bandwidth_(GB)": b, "Type": type, "Installation_charges": x[i].getElementsByTagName("install_charges")[0].childNodes[0].nodeValue}
}
</script>
</head>
<body>
<div id="container3"></div>

<script>
new TableOrderer('container3',{data : data3,allowMultiselect : false,search: true,paginate : true,pageCount : 15});
</script>


</body>
</html>

对于原型的表排序类，您可以登录： http://prototools.negko.com/demo/表格排序者/

Ok I at last comes up with the solution hope that will help also for people who need it in future use
so just change the name of the XML At:

xmlhttp.open("GET","[XML File and is path]",false);

and then use the Loop data3 as you wanted in my case it was :

var b= x[i].getElementsByTagName("bandwidth")[0].childNodes[0].nodeValue;
if (b==0) b="unlimited";

var type = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue+"-"+x[i].getElementsByTagName("wireless_type")[0].childNodes[0].nodeValue;

data3[i]=
{"Monthly_Charges": x[i].getElementsByTagName("charges")[0].childNodes[0].nodeValue, "Provider": x[i].getElementsByTagName("network")[0].childNodes[0].nodeValue, "Speed_(kbps)": x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue, "Bandwidth_(GB)": b, "Type": type, "Installation_charges": x[i].getElementsByTagName("install_charges")[0].childNodes[0].nodeValue}

Because i was taking data about some internet packages and then putting it in the Array/Json notation to send it to the prototype table sorter class so you just have to edit this for your own use and data...!!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Prototype Table Sorter Class : XML</title>
  <meta name="keywords" content="javascript, prototype, prototype.js, table sorter, table sorter prototype" />
  <meta name="description" content="Demo of TableOrderer a table sorter class for prototype.js" />

  <script type="text/javascript" language="JavaScript" src="js/prototype.js"></script>

  <script type="text/javascript" language="JavaScript" src="js/table_orderer.js"></script>

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/tableorderer.css" type="text/css" media="screen" />
<script type="text/javascript" language="JavaScript">
 // var sess=document.getElementById("sess").value;
if(window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
xmlhttp.open("GET","xml/[email protected]_internet.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

var x=xmlDoc.getElementsByTagName("Results");
var charg= x[0].getElementsByTagName("charges")[0].childNodes[0].nodeValue;

//alert(8);



var data3 = new Array(x.lengths);
for(i=0; i<x.length;i++)
{
var b= x[i].getElementsByTagName("bandwidth")[0].childNodes[0].nodeValue;
if (b==0) b="unlimited";

var type = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue+"-"+x[i].getElementsByTagName("wireless_type")[0].childNodes[0].nodeValue;

data3[i]=
{"Monthly_Charges": x[i].getElementsByTagName("charges")[0].childNodes[0].nodeValue, "Provider": x[i].getElementsByTagName("network")[0].childNodes[0].nodeValue, "Speed_(kbps)": x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue, "Bandwidth_(GB)": b, "Type": type, "Installation_charges": x[i].getElementsByTagName("install_charges")[0].childNodes[0].nodeValue}
}
</script>
</head>
<body>
<div id="container3"></div>

<script>
new TableOrderer('container3',{data : data3,allowMultiselect : false,search: true,paginate : true,pageCount : 15});
</script>


</body>
</html>

for Table Sorting Class of Prototype you can log on to : http://prototools.negko.com/demo/tableorderer/

回复 原文
~没有更多了~

关于作者

始终不够

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文