更新和过滤HTML表

Question

我一直在为加密货币交易制作交易平台。我创建了一个表格来显示交易所的所有硬币对。我每隔5秒就使用从交换机获得的数据更新此表。我还想通过输入过滤表格（如果用户在BTC中输入，表格中只会列出BTC对。）

一般情况下这是有效的，但如果我想过滤表格，那么每当表格更新时，其他一些应该被过滤的对子会显示2-3秒然后消失。通常情况下，应该显示的对也会在2-3秒内消失。

首先我创建表

createMainTable: function () {
    var marketLen, column, row;
    bittrex.getmarketsummaries(function (data, err) {
        if (err) {
            return console.error(err);
        }
        marketLen = data.result.length;
        var table = document.getElementById("mainTableBody");
        for (i = 0; i < marketLen; i++) {
            row = table.insertRow(i);
            row.id = data.result[i].MarketName;
            row.addEventListener('click', function () {
                testFun();
            })
            for (j = 0; j < 4; j++) {
                column = row.insertCell(j);
                column.className = "col" + j;

            }
        }
    });

}

然后我每隔5秒从交换机传入数据：

fillMainTable: function () {
    var marketName, marketVolume, marketChange, market, marketName_2, lastPrice;
    bittrex.getmarketsummaries(function (data, err) {
        if (err) {
            return console.error(err);
        }
        symbolNav = document.getElementById("coin-name").innerHTML;
        market = data.result
        for (i = 0; i < market.length; i++) {
            marketName = market[i].MarketName;
            marketVolume = market[i].BaseVolume.toFixed(2);
            marketChange = (market[i].Last / market[i].PrevDay * 100 - 100);
            marketChange = marketChange.toFixed(1);
            lastPrice = market[i].Last.toFixed(8);

            if (marketChange > 0) {
                document.getElementById("col" + i + 2).style.color = "#28a745";
                document.getElementById("col" + i + 2).innerHTML = marketChange + "&#11014;";
            }
            if (marketChange < 0) {
                document.getElementById("col" + i + 2).style.color = "#dc3545";
                document.getElementById("col" + i + 2).innerHTML = marketChange + "&#11015;";
            }
            if (marketChange == 0) {
                document.getElementById("col" + i + 2).style.color = "black";
                document.getElementById("col" + i + 2).innerHTML = marketChange + "&#9679;";
            }


            if (marketName[0] === 'B') {
                document.getElementById("col" + i + 1).innerHTML = marketVolume + ' BTC';
                document.getElementById("col" + i + 3).innerHTML = lastPrice + ' BTC';
            }
            if (marketName[0] === 'E') {

                document.getElementById("col" + i + 1).innerHTML = marketVolume + ' ETH';
                document.getElementById("col" + i + 3).innerHTML = lastPrice + ' ETH';
            }
            if (marketName[0] === 'U') {
                document.getElementById("col" + i + 1).innerHTML = marketVolume + ' USDT';
                document.getElementById("col" + i + 3).innerHTML = lastPrice + ' USDT';
            }


            if (marketName[0] === 'B') {
                marketName_2 = marketName.slice(4) + "-BTC"
                document.getElementById("col" + i + 0).innerHTML = marketName_2;
            }
            if (marketName[0] === 'E') {
                marketName_2 = marketName.slice(4) + "-ETH"
                document.getElementById("col" + i + 0).innerHTML = marketName_2;
            }
            if (marketName[0] === 'U') {
                marketName_2 = marketName.slice(5) + "-USDT"
                document.getElementById("col" + i + 0).innerHTML = marketName_2;
            }
        }
        market = null;
    });
}

表头是在html文件中创建的：

 <table id="mainTable" class="table">
            <tr>
                <thead>
                    <th>Coin</th>
                    <th>Vol</th>
                    <th>% Change</th>
                    <th>Last price</th>
                </thead>
            </tr>
            <tbody id="mainTableBody">
            </tbody>
        </table>

过滤功能如下。 html中的输入具有“tableFilter”的id标记。

function filterTable() {
            var input, filter, table, tr, td, i;
            input = document.getElementById("tableFilter");
            filter = input.value.toUpperCase();
            table = document.getElementById("mainTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        };