Javascript 关于HTML表行的Select语句

假设我有一个HTML表格

|VENDOR|ITEM|TOTAL|
|BNB|ITEM1|1000|
|BNB|ITEM2|250|
|XZY|ITEM2|600|
|BNB|ITEM3|1000|
|XZY|ITEM1|300|

我需要做的是一个select语句，类似于sql中的语句

SELECT * WHERE VENDOR = 'BNB';

它应该会回来

|VENDOR|ITEM|TOTAL|
|BNB|ITEM1|1000|
|BNB|ITEM2|250|
|BNB|ITEM3|1000|

---

我不想运行for循环，因为当我们有50000多行时，这将需要很长时间，我必须运行for循环，已经有了供应商列表。所以100个供应商，每次运行50000行。您可以看到问题。

您不能在加载时显示完整的50k结果。必须将其设置为“不显示”。这样，它将在合理的时间内加载

解决这个问题非常简单，只需为行中的每个供应商添加一个类。然后，您可以使用jquery选择要显示的类

$('tr').hide();
$('.specific-vendor').show();

---

最后，您需要以某种方式进行循环。通过在行上使用数据属性，可以将CSS选择器与QuerySectorAll一起使用，以获取所需的项

var table=document.getElementByIddetails； document.getElementByIdsel.addEventListenerchange，函数{ var val=该值； table.classList.togglefilter，val.length>0； Array.fromdocument.QuerySelector所有'details tbody tr.active'。forEach函数元素{ elem.classList.removeactive； }; if val.length{ var rows=document.queryselectoral'details tbody tr[data vendor='+val+']； Array.fromrows.forEach函数行{ row.classList.addactive； }; } }; 详细信息。过滤器tbody tr{ 显示：无； } 详细信息。过滤器t阀体tr.active{ 显示：表格行； } A. B C 出售 A-1 A-2 A-3 A-4 B-1 B-2 B-3 C-1

---

所以@epascarello帮我想出了一个主意，所以我需要表扬他。这并不完全是我所需要的，但却让我走上了正确的道路

所以我在后台做的是

 proddb.each("SELECT * FROM table_a", function (DBRow) {

        var row = document.createElement("tr");
        /////////////////////////////////////////
        cell = document.createElement("td");
        cell.innerHTML = DBRow.col1;
        row.appendChild(cell);
        /////////////////////////////////////////
        cell = document.createElement("td");
        cell.innerHTML = DBRow.col2;
        row.appendChild(cell);


        //add queries
        row.dataset.table_a_col1= DBRow.col1;
        row.dataset.table_a_col2= DBRow.col2;

        //end queries

        html_table_name.appendChild(row);
    });

现在在后端，我可以像这样访问行

    var tablerow= document.querySelectorAll('tr[data-table_a_col1="' + searchvalue + '"]');
    for (var ii = 0; ii < tablerow.length; ii++) {

        if (tablerow[ii].cells[21].innerHTML == "1") {
            //do the stuff here.
        }
    }

这将行数从50000减少到361，这大大加快了速度，感谢所有的帮助

---

@epascarello如果您能将此作为您的答案，并给我一些信任，我将接受此答案，感谢您所做的一切，巴德。

5万行的渲染似乎是一个问题；我们使用的是electron，所以几秒钟后就会发生：您必须将数据放入每行数据的对象数组中，然后您可以使用array.filter。使用单元格上的数据属性，使用querySelectorAll引用数据属性，设置一个类。@ScottMarcus hi你能给我一个例子或一个linkhey兄弟吗谢谢你的帮助。。只是后端im动态创建表行中的一个问题。。那么，当我第一次创建行时，我是否只是将数据供应商或目标添加到行中？当我执行查询选择器时，它运行的所有for循环现在都只包含选定的行了吗？