javascript - tableutils 过滤器输入移出表-6ren

javascript - tableutils 过滤器输入移出表

转载作者：行者123 更新时间：2023-11-28 01:05:04

这个NEW FIDDLE在表格内显示文本，我可以在其中过滤数据，但是我不希望输入位于表格内，我想映射到另一个输入或将其从表格中删除并将其放在外面。

无法处理我的文件:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/tableutils.js"></script>


    <script>
        function searchRecords() {

            $('#searchMe').tableutils({
                filter: {
                    type: ['text']
                },
                fixHeader: {
                    width: 1000,
                    height: 200
                },

                columns: [{
                    label: 'First Name'
                }, {
                    label: 'Last Name'
                }, {
                    label: 'Concept'
                }, {
                    label: 'Rating'
                }, {
                    label: 'AKA'
                }]
            });

            $('#searchRecords').hide();
        }

        searchRecords();

$('#filter_searchMe_0').css('width','100px').detach().appendTo( "#outSide" );
</script>

<body onload="searchRecords();">
<div id="outSide"></div>
<div class="demoContentDIV">
    <ul id="allDemos" style="list-style-type: none;">
        <li id="searchContent">
            <table id="searchMe" width="980px">
                <thead>
                    <tr>
                        <th width="20%">First Name</th>
                        <th width="20%">Last Name</th>
                        <th width="10%">Concept</th>
                        <th width="10%">Rating</th>
                        <th width="40%">AKA</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td width="20%">Tony</td>
                        <td width="20%">Stark</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">42</td>
                        <td width="40%">Iron Man</td>
                    </tr>
                    <tr>
                        <td width="20%">Jack</td>
                        <td width="20%">Sparrow</td>
                        <td width="10%">Disney</td>
                        <td width="10%">40</td>
                        <td width="40%">Pirate</td>
                    </tr>
                    <tr>
                        <td width="20%">Bruce</td>
                        <td width="20%">Banner</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">38</td>
                        <td width="40%">The Hulk</td>
                    </tr>
                    <tr>
                        <td width="20%">Clarke</td>
                        <td width="20%">Kent</td>
                        <td width="10%">DC</td>
                        <td width="10%">35</td>
                        <td width="40%">Man of Steel</td>
                    </tr>
                    <tr>
                        <td width="20%">Bruce</td>
                        <td width="20%">Wayne</td>
                        <td width="10%">DC</td>
                        <td width="10%">34</td>
                        <td width="40%">The Dark Knight</td>
                    </tr>
                    <tr>
                        <td width="20%">Sherlock</td>
                        <td width="20%">Holmes</td>
                        <td width="10%">Doyle</td>
                        <td width="10%">37</td>
                        <td width="40%">Ingenious</td>
                    </tr>
                    <tr>
                        <td width="20%">Captain</td>
                        <td width="20%">America</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">39</td>
                        <td width="40%">Captain America</td>
                    </tr>
                    <tr>
                        <td width="20%">Peter</td>
                        <td width="20%">Parkar</td>
                        <td width="10%">Marvel</td>
                        <td width="10%">43</td>
                        <td width="40%">Spidy</td>
                    </tr>
                </tbody>
            </table>
        </li>
    </ul>
</div>
<br>
<br>

</body>