如何将Javascript(jQuery)添加到从XSLT/XML创建的页面

How to add Javascript(jQuery) to a page created from XSLT/XML

本文关键字:XML XSLT 创建 Javascript jQuery 添加      更新时间:2023-09-26

我有一个XML文件(由几个数据项组成,即<Book>)和我创建的一个相应的XSLT文件,在浏览器中打开该文件时,将该图书列表转换为html表。列命名为"Author", "Title"answers"BookID"(它们是<tr>的子节点的id s)。

现在我想使用jQuery使结果页面动态,也就是说,我想使结果表的行在我点击的列上排序。然而,虽然表格呈现得很好,但生成的jQuery代码似乎没有效果。

我不确定这是我的jQuery代码错误的结果,还是我没有正确地包含它,或者两者兼而有之。我在我的XSL文件中包含了两个<script></script>标签(一个用于热链接jQuery库,另一个用于链接到我的代码),但我不确定这是否是正确的方法。此外,有人可以看看我的jQuery代码,找出是否有什么错误(我是一个完整的新手web编程,所以请原谅我的错误)?

谢谢!

$(document).ready(function() {
function sortBy(a, b, selectFunction) {
    var a1 = selectFunction(a);
    var b1 = selectFunction(b);
    if (a1 < b1) {
        return -1;
    }
    if (a1 > b1) {
        return 1;
    }
    return 0;
}
function sortHelper(index) {
    var rows = $('table tbody tr').get();
    rows.sort(function(a, b) {
        return sortBy(a, b, function(x) { return $(x).children('td').eq(index).text().toUpperCase(); });
    });
    rows.appendTo('tbody');
}
$('#Author').click(function() {
   sortHelper(0);
});
$('#Title').click(function() {
    sortHelper(1);
});
$('#BookID').click(function() {
    sortHelper(2);
});
});

注释中声明的.get()返回一个javascript对象。因此,要使用rows.sort(),您需要jQuery对象。

// javascript
$(obj).get(0); // returns the first element from the query
// jquery
$(obj).eq(0); // return the first $(element) from the query.

我还注意到一件事:因为你是通过id访问td的,你可以这样做:

var topRow = $("table tbody tr").eq(0),
    topCells = topRow.find("td"); // expecting #author, #title, #bookid
topCells.click(function(){
    sortHelper($(this).index()); // makes more sense this way
});

除此之外,如果你正在加载外部*.js文件到你的解决方案中,你会很好。如果您直接将代码插入页面,请使用CDATA编码,如下所述。