使用 select 框编辑 table

Question

如何才能只显示从 select 框中选择的 table 中的频道？

<select>
    <option style="display:none;">Channel</option>
    <option value="all">All</option>
    <option value="onlineButcher">Online Butcher</option>
    <option value="theMeatSite">The Meat Site</option>
    <option value="bbqOnline">BBQ Online</option>
    <option value="weSellMeat">We Sell Meat</option>
</select>

这些是我的选择，所以在下面的 table 中说我只希望它显示带有 Online Butcher 频道的行？

<table class="orders">
    <thead>
        <tr>
            <th>Niche ID</th>
            <th>Channel</th>
            <th>Customer Name</th>
            <th>Dispatch</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>012345678</td>
        <td>Online Butcher</td>
        <td>Mr D Jones</td>
        <td>Dispatch</td>
    </tr>
    <tr>
        <td>012345677</td>
        <td>The Meat Site</td>
        <td>Mr C Jones</td>
        <td>Dispatch</td>
    </tr>
    <tr>
        <td>012345676</td>
        <td>BBQ Online</td>
        <td>Mr B Jones</td>
        <td>Dispatch</td>
    </tr>
    <tr>
        <td>012345675</td>
        <td>We Sell Meat</td>
        <td>Mr A Jones</td>
        <td>Dispatch</td>
    </tr>
    </tbody>
</table>

希望它有意义。

我用它来使用 headers 对我的 table 进行排序，也许类似，但不是顺序，只显示特定频道。

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};

Answer 1

您可以先使所有行不可见，然后 filter 由 <td> 中的文本显示的行，仅 show filter 之后返回的行。

 $('select').change(function(){

        var filterby = $( "option:selected" ).text(); 
        $('tr').hide();
        $("td").filter(function() {
           return $(this).text().toLowerCase().indexOf(filterby) != -1; }).parent().show();
        });   
 }):

Answer 2

您可以检索所选选项的文本，然后使用 filter() 查找包含该文本的行并显示它们。试试这个：

$('select').change(function() {
    var value = $('option:selected', this).text(); 
    var $allRows = $('table tbody tr').show();
    var $selectedRows = $allRows.filter(function() {
        return $('td:eq(1)', this).text() == value;
    });

    if ($selectedRows.length) {
        $allRows.hide();
        $selectedRows.show();
    }
}).change();

Example fiddle

Answer 3

您应该将 id 添加到与下拉列表中的值匹配的元素内的元素，将 id 添加到您的元素，然后将事件绑定到 select 的 on change 以操纵显示元素。

使用 select 框编辑 table

Edit table with a select box

html

javascript

sorting

jquery

html-table