使用选择框编辑表格答案

【问题标题】：Edit table with a select box使用选择框编辑表格
【发布时间】：2015-06-30 00:42:16
【问题描述】：

如何仅在表格中显示我从选择框中选择的频道？

<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 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>

希望它有意义。

我用它来使用标题对我的表进行排序，可能是类似的东西，但不是 order 只显示某个频道。

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();};

【问题讨论】：

Stackoverflow 不是一个“为我做这个”的网站，而是一个“我试过这个，没用，为什么不呢？”的网站。请向我们提供一些您已经尝试过的代码，然后我们可以检查如何帮助您改进它。
如果我有线索，我尝试研究并找不到任何对表格不起作用的东西，请添加我用来对行进行排序的代码。
您可以使用 javascript 相当简单地做到这一点。您可能还会发现诸如 jQuery 之类的 javascript 库在遍历/操作 DOM 时有些用处。
看看这里jsfiddle.net/ukW2C/3 你将下拉值传递给过滤器，而不是搜索文本
只有html，怎么能这样

标签： javascript jquery html sorting html-table

【解决方案1】：

您应该在元素中添加与下拉列表中的值匹配的元素的 id，向元素添加 id，然后将事件绑定到选择的更改以操纵元素的显示。

【讨论】：

【解决方案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

【讨论】：

没问题，很乐意提供帮助。

【解决方案3】：

您可以先使所有行不可见，然后filter<td>s 中的文本行和 showfilter 之后返回的行。

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

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

【讨论】：