jquery bootstrap表格搜索效果代码-html代码-BFW代码库

jquery bootstrap表格搜索效果代码

代码语言：html

所属分类：表格

代码描述：jquery bootstrap表格搜索效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        body {
            padding: 20px 20px;
        }

        .results tr[visible='false'],
        .no-result {
            display: none;
        }

        .results tr[visible='true'] {
            display: table-row;
        }

        .counter {
            padding: 8px;
            color: #ccc;
        }
    </style>


</head>

<body>
    <div class="form-group pull-right">
        <input type="text" class="search form-control" placeholder="What you looking for?">
    </div>
    <span class="counter pull-right"></span>
    <table class="table table-hover table-bordered results">
        <thead>
            <tr>
                <th>#</th>
                <th class="col-md-5 col-xs-5">Name / Surname</th>
                <th class="col-md-4 col-xs-4">Job</th>
                <th class="col-md-3 col-xs-3">City</th>
            </tr>
            <tr class="warning no-result">
                <td colspan="4"><i class="fa fa-warning"></i> No result</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Vatanay Özbeyli</td>
                <td>UI & UX</td>
                <td>Istanbul</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Burak Özkan</td>
                <td>Software Developer</td>
                <td>Istanbul</td>
            </tr>
            <tr>
                <th scope="row">3</th>
 .........完整代码请登录后点击上方下载按钮下载查看