Table Filter

Filter table excluding button text. (currently with an issue)

by bmarsh123

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class="row-fluid span12">
    <input type="text" id="searchFilter" placeholder="Type to filter" />
</div>
<div class="span4">
    <table class="table table-hover table-striped">
        <tbody id="table1">
            <tr>
                <div class="dv"><td>Running</td></div>
                <div class="btndiv"><td><button>Delete</button></td></div>
            </tr>
            <tr>
                <td>Foo</td>
                <td><button>Delete</button></td>
            </tr>
            <tr>
                <td>Bar</td>
                <td><button>Delete</button></td>
            </tr>
            <tr>
                <td>Fun</td>
                <td><button>Delete</button></td>
            </tr>
            <tr>
                <td>In The</td>
                <td><button>Delete</button></td>
            </tr>
            <tr>
                <td>Sun</td>
                <td><button>Delete</button></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body {
    margin-top: 15px;
}
table {
    border: 1px solid #EEEEEE;
}
.dv {
    float: left;
    width: 40%;
}
.btndiv {
    float: right;
    width: 40%;
}
button {
    float: right;
}

JavaScript

$("#searchFilter").keyup(function () {
    var unicode = event.charCode ? event.charCode : event.keyCode;
    if (unicode == 27) { $(this).val(""); }
    var data = this.value.split(" ");
    var tbl = $("#table1").find("tr");
    if (this.value == "") {
        tbl.show();
        return;
    }
    tbl.hide();
    tbl.filter(function (i, v) {
        var t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if (t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    }).show();
});