JavaScript页面内Table搜索

页面内搜索，不需要再次数据库查询，将选择符合条件的添加变成红色字体

效果图

css

        .searchSpan {
            color:#d2b48c
        }

html

<table id="dataTable" class="t1" style=" width: 99%;">
        <thead>
        <tr>
            <th> 表名称 </th>
            <th> 表描述 </th>
            <th colspan="2"> 操作 </th>
        </tr>
        </thead>
        <tbody>
        <tr  data-type='data'  id="data-0" class="a1 ui-jqgrid ui-widget-content">
            <td> bus_account </td>
            <td>  </td>
            <td data-type="btn"><input type="button" value="查看" class="button" οnclick="Read('bus_account')"/></td>
        </tr>
	<tr data-type='data' id="data-1" class="a1 ui-jqgrid ui-widget-content">
            <td> bus_type </td>
            <td>  </td>
            <td data-type="btn"><input type="button" value="查看" class="button" οnclick="Read('bus_type')"/></td>
        </tr>
	<tr data-type='data' id="data-2" class="a1 ui-jqgrid ui-widget-content">
            <td> sys_user </td>
            <td>  </td>
            <td data-type="btn"><input type="button" value="查看" class="button" οnclick="Read('sys_user')"/></td>
        </tr>
        </tbody>
    </table>

JavaScript

/**
 * 模糊查找
 * 指定table中是否存在指定字符，存在则改变颜色，不存在则隐藏，如果字符为空，这显示所有
 * @param {} find 查找数据
 * @param {} tableId 要操作标的id
 * @param {} callBack 回调函数，当find为控制，指定执行方法，
 *           如果callBack==undefind||callBack==null时，显示所有行，
*/
function SearchTable(find, tableId, callBack) {
    this.find = find.replace(" ", "");
    this.flg = false;
    this.callBack = callBack;
    this.table = document.getElementById(tableId);
    this.tbody = this.table.getElementsByTagName("tbody")[0];
    this.tr = this.tbody.getElementsByTagName("tr");
    this.dataType = function (tr) {
        var d = tr.getAttribute("data-type");
        return d;
    }
    this.tdfor = function () {
        var flg = false;
        var td = this.td;
        for (var d = 0; d < td.length; d++) {
            if (td[d].innerText.toLowerCase().indexOf(this.find) >= 0 && this.find.length > 0) {
                var _html = "<span class='searchSpan'>" + td[d].innerText + "<span>";
                td[d].innerText = "";
                td[d].innerHTML = _html;
                flg = true;
            } else {
                var span = td[d].getElementsByClassName("searchSpan");
                if (span.length <= 0) {
                    continue;
                }
                for (var s = 0; s < span.length; s++) {
                    var te = span[s].innerText;
                    td[d].innerText += te;
                }
            }
        }
        return flg;
    }
    this.trfor= function() {
        for (var i = 0; i < this.tr.length; i++) {
            var t = this.tr[i];
            if (this.dataType(t)!=="data") {
                continue;
            }
            this.td = t.getElementsByTagName("td");
            this.flg=this.tdfor();
            var innerHTML = t.innerHTML;
            if (innerHTML.toLowerCase().indexOf(this.find) >= 0) {
                t.style.display = "";
            } else {
                t.style.display = "none";
            }
            t.style.display = this.flg ? "" : "none";
        }
    }
    this.trforShow= function() {
        for (var r = 0; r < this.tr.length; r++) {
            if (this.dataType(this.tr[r]) !== "data") {
                continue;
            }
            this.td = this.tr[r].getElementsByTagName("td");
            this.flg = this.tdfor();
            this.tr[r].style.display = "";
        }
    }
    this.callbacks = function () {
        if (this.callBack === undefined || this.callBack == null) {
            this.trforShow();
            return;
        } else {
            this.callBack();
        }
    }
    this._init = function () {
        if (this.find.length > 0) {
            this.trfor();
        } else {
            this.callbacks();
        }
    }
    this._init();
}

2018/05/06更新算法

更新日志：提供缓存，更改算法，提高效率

var tableCache = {};

/**
 * 模糊查找
 * 指定table中是否存在指定字符，存在则改变颜色，不存在则隐藏，如果字符为空，这显示所有
 * @param {} find 查找数据
 * @param {} tableId 要操作标的id
 * @param {} callBack 回调函数，当find为控制，指定执行方法，
 *           如果callBack==undefind||callBack==null时，显示所有行，
*/
function SearchTable(find, tableId, callBack, isCache) {
    isCache = isCache || true;
    find = find.replace(" ", "");
    var table = document.getElementById(tableId);
    var tbody = table.getElementsByTagName("tbody")[0];
    var bodyInnerHTML = isCache == false || tableCache[tableId] == undefined || tableCache[tableId] == "" ?
        tbody.innerHTML.replace(/[\r\n\t]/g, '').replace(/[>]\s*[<]/g, "><").replace(/["]/g, "\"").replace(/[']/g, "\'") :
        tableCache[tableId];
    if (find == "") {
        tbody.innerHTML = bodyInnerHTML;
        if (callBack != null) {
            callBack();
        }
        return;
    }
    var inerArry = bodyInnerHTML.split('</tr><tr');
    for (var i = 0; i < inerArry.length; i++) {
        var iner = inerArry[i];
        var regex = new RegExp("([>](\\s?[^<>]*" + find + "[^<>]*\\s?)+[<])");
        var tr = "";
        if (regex.test(iner)) {
            //显示该列
            tr="<tr ";
            //设置该列颜色
            //分组匹配到需要的数据，然后进行替换
            inerArry[i] = iner.replace(RegExp.$1, RegExp.$1.replace(find, "<span class='searchSpan'>" + find + "</span>"));
        } else {
            tr = "<tr style='display:none'";
        }
        inerArry[i] = inerArry[i].indexOf("<tr") >= 0 ? inerArry[i].replace("<tr", tr) : (tr + inerArry[i]);
        inerArry[i] = inerArry[i].indexOf("</tr>") >= 0 ? inerArry[i] : (inerArry[i] + "</tr>");
    }
    tbody.innerHTML = inerArry.join('');
}

有需要的大兄弟可以借鉴一下，不过里边有部分是需要修改的

调用1

var find = document.getElementById("columnInfo").value;
            SearchTable(find, "dataTable"); 

调用2

var find = document.getElementById("columnInfo").value;
            SearchTable(find, "dataTable", function () {
                RemoveTr('data');
                loadData();
            });