因此，可以說我有一個表在HTML在HTML錶行Select語句
|VENDOR|ITEM|TOTAL|
|BNB|ITEM1|1000|
|BNB|ITEM2|250|
|XZY|ITEM2|600|
|BNB|ITEM3|1000|
|XZY|ITEM1|300|
什麼，我需要做的是選擇語句像在SQL
SELECT * WHERE VENDOR = 'BNB';
它應該返回
|VENDOR|ITEM|TOTAL|
|BNB|ITEM1|1000|
|BNB|ITEM2|250|
|BNB|ITEM3|1000|
我不想運行一個for循環，因爲當我們有50000+行需要很長時間時，我必須運行一個for循環al準備好供應商名單。所以100個供應商每次運行50000行。你可以看到問題。
也許你可以使用https://datatables.net/。我認爲這將解決你的問題。
你不能顯示完整的50K結果負載。它必須設置爲不顯示。這樣它會在合理的時間內加載。
的解決方案，這是很容易的，你只需要添加一個類上的行每個供應商。然後你可以用jquery來選擇這個類來顯示。
$('tr').hide();
$('.specific-vendor').show();
最後你需要以某種方式循環。在行上使用數據屬性可讓您使用CSS選擇器和querySeectorAll來獲取所需的項目。
var table = document.getElementById("details");
document.getElementById("sel").addEventListener("change", function() {
var val = this.value;
table.classList.toggle("filter", val.length>0);
Array.from(document.querySelectorAll('#details tbody tr.active')).forEach(function (elem) {
elem.classList.remove("active");
});
if (val.length) {
var rows = document.querySelectorAll('#details tbody tr[data-vendor="' + val + '"]');
Array.from(rows).forEach(function (row){
row.classList.add("active");
});
}
});#details.filter tbody tr {
display:none;
}
#details.filter tbody tr.active {
display: table-row;
}<select id="sel">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<table id="details">
<thead>
<tr><th>Vend</th></tr>
</thead>
<tbody>
<tr data-vendor="A"><td>A-1</td></tr>
<tr data-vendor="A"><td>A-2</td></tr>
<tr data-vendor="A"><td>A-3</td></tr>
<tr data-vendor="A"><td>A-4</td></tr>
<tr data-vendor="B"><td>B-1</td></tr>
<tr data-vendor="B"><td>B-2</td></tr>
<tr data-vendor="B"><td>B-3</td></tr>
<tr data-vendor="C"><td>C-1</td></tr>
</tbody>
</table>嘿兄弟謝謝你的幫助..只是在後端im動態創建錶行的問題..所以當我第一次創建行時，我只是將「數據供應商」或「目標」添加到行？而當我做查詢selectorall循環它運行通過現在只有選定的行現在全部？ – Custard
所以@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如果你可以複製這個作爲你的答案，並給我一些信用，以及生病接受答案的感謝一切芽。
正在渲染的50K行看起來像一個問題...;） – epascarello
我們使用電子，所以它發生在幾秒鐘內:) – Custard
您將不得不將數據獲取到一個對象數組（每行數據），然後你可以使用'Array.filter（）'。 –