Question

老实说，我甚至不确定最好的解决方法，但实质上，我在一个包含$type参数的包含文件中有一个函数，然后将从我的数据库中检索/打印结果传递给它的$ type ...我想要做的是在页面上有一系列链接，当你点击某个链接时，将运行该功能并相应地显示结果...

因此，在页面的初始加载时，有一个表格可以显示所有内容（我正在极大地简化表格）。

<table>
<tr><th>Item</th><th>Type</th></tr>
<tr><td>Milk</td><td>Dairy</td></tr>
<tr><td>Yogurt</td><td>Dairy</td></tr>
<tr><td>Chicken</td><td>Meat</td></tr>
<tr><td>Zucchini</td><td>Vegetable</td></tr>
<tr><td>Cucumber</td><td>Vegetable</td></tr>
</table>

然后，在侧边栏中，我有一系列链接：

<a href="#">Dairy</a>
<a href="#">Meat</a>
<a href="#">Vegetable</a>

我想根据点击的链接过滤初始表（以及来回等），这样如果用户点击“蔬菜”，我的包含文件中的函数将运行并过滤表只显示“蔬菜”类型...

Answer 1

首先想到的是将一个类属性添加到＆lt; tr＆gt;标签和id属于＆lt; a＆gt;标签，以便您可以轻松过滤：

<tr class="dairy"><td>Milk</td><td>Dairy</td></tr>
<tr class="meat"><td>Chicken</td><td>Meat</td></tr>

<a href="#" id="dairy">Dairy</a>
<a href="#" id="meat">Meat</a>

然后在你的JavaScript中（我在这里使用jQuery）：

$('a').click(function(evt){
    var myId = $(this).attr('id');

    $('tr').each(function(idx, el){
        if ($(el).hasClass(myId))
        {
            $(el).show();
        }
        else
        {
            $(el).hide();
        }
    });
});

这样做的另一个好处是可以让您无需更改代码即可本地化文本。

Answer 2

好的，我创造了一个正确的答案。你可以像达雷尔提出的那样去做。这只是分页事件的一个扩展，以避免cookie：

$('a').click(function(evt){
    var myId = $(this).attr('id');


    // append a idndicator to the current url
    var location = "" + document.location + "";
    location = location.split('#',1);
    document.location = location + '#' + $(this).attr('id');


    //append to next and previous links
    $('#nextlink').attr({
        'href': $('#nextlink').attr('href') + '#' + $(this).attr('id')
    });
    $('#previouslink').attr({
        'href': $('#previouslink').attr('href') + '#' + $(this).attr('id')
    });

    $('tr').each(function(idx, el){
        if ($(el).hasClass(myId))
        {
            $(el).show();
        }
        else
        {
            $(el).hide();
        }
    });
});

页面加载后执行的一些代码：

var filter = window.location.hash ? '[id=' + window.location.hash.substring(1, window.location.hash.length) + ']' : false;
if(filter)
    $('a').filter(filter).click();

这模拟/执行具有特定ID的链接上的页面加载点击。

但一般来说，如果你有一个大型数据库，你应该在后端用SQL直接过滤它。这将使显示的表更加一致。例如，如果第1页可能只有3行“乳制品”，并且在第2页上有10行“乳制品”。

Answer 3

如果您在前面打印整个表格，则无需返回服务器，您可以简单地隐藏给定类型的所有行。例如，使用jQuery：

    $('#sidebar a').click(function(){
      // grab the text content of the a tag conver to lowercase
      var type = $(this).text().toLowerCase();

      /* filter all the td's in the table looking for our specified type then hid the 
       * row that they are in
       */
      $('#my_data_table td').contents().filter(function(){
         return this.nodeType == 3 && this.toLowerCase() == type;
      }).parent('tr').hide();

      return false;
    });

实际上，虽然建议abotu在TR中添加一个类更好，因为如果因为某些原因而没有预期的内容，过滤文本内容会变得棘手（因此我转换为所有小写以帮助解决这个问题）。

打印来自页面onclick功能的结果？

3 个答案: