基于Alphabet按钮显示和隐藏表行

Question

我有一个有很多行的表，我想让用户能够点击'A‘按钮，并显示所有以'A’开头的结果。他们可以对每封信都这么做。这就是我到目前为止想出的：

<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函数：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/