Question

我有一个表，其中有很多行，我想让用户单击“ A”按钮，然后显示所有以“ A”开头的结果。他们可以为每个字母做同样的事情。到目前为止，这是我想出的：

HTML

<input type="button" id="aSort" value="A" onclick="alphaSort(this.value);">
    <table>
    <thead>
        <tr>
            <td>Title</td>
            <td>Description</td>
            <td>Active</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td name="title">Apple</td>
            <td>It's a fruit</td>
            <td>Active</td>
        </tr>
        <tr>
            <td name="title">Pear</td>
            <td>It's also fruit</td>
            <td>No</td>
        </tr>
    </tbody>
    </table>

JS

function alphaSort(val) {
    //pseudocode
    var $rows = $('td[name=title]');
    $rows.forEach(function(e) {
        if(e.innerText == val + '%') {
            e.closest('tr').show();
        } else {
            e.closest('tr').hide();
        }
    }
}

因此，我的想法是，如果用户单击按钮仅显示Apple行。理想情况下，该功能不区分大小写。有人可以帮助我如何有效地正确遍历所有表行并比较存储在title行中的值吗？

Answer 1

您可以使用startsWith函数：https://www.w3schools.com/jsref/jsref_startswith.asp

像这样：

$("#aSort").click(function(){
    var $rows = $('td[name=title]');
    var val = $(this).val()
    $rows.each(function() {
        if($(this).text().startsWith(val)) {
            $(this).closest('tr').show();
        } else {
            $(this).closest('tr').hide();
        }
    })
})

https://jsfiddle.net/xpvt214o/899140/

基于字母按钮显示和隐藏表格行

1 个答案: