footable js 删除 table 中的所有表单元素

Question

我在 footable jquery 库的帮助下实现了响应式 table。现在我已经在其中放置了输入标签，select 框。 Footable js 删除了所有这些标签并使其成为一个空 <td>.

<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
  <thead>
    <tr>
        <th></th>
        <th data-breakpoints="xs">Date Created</th>
        <th>Source</th>
        <th>Type</th>
        <th data-breakpoints="xs">Status</th>
        <th data-breakpoints="xs sm">&nbsp;</th>
        <th data-breakpoints="xs sm md" >&nbsp;</th>
        <th data-breakpoints="xs sm md">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr data-expanded="true">
        <td></td>
        <td>6/11/16</td>
        <td>Mr. Cooper - Request Info</td>
        <td>Buying</td>
        <td>
            <select class="nobrdr">
                <option>Offer</option>
            </select>
        </td>
        <td><input type="text" class="nobrdr" placeholder="Value"/></td>
        <td><input type="text" class="nobrdr" placeholder="Date" /></td>
        <td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
    </tr>

  </tbody>
</table>

jquery function :

$(function($){
            $('#accordion-example-1,#accordion-example-2').footable({

            });
        });

Answer 1

您需要将表单元素所在列的数据类型更改为 "html"，否则 FooTable 会假定该列仅包含文本并将其格式化 - 即它将删除所有HTML 来自单元格内容的标记，而不仅仅是表单元素。

例如你的情况：

<th data-type="html" data-breakpoints="xs">Status</th>

将告诉它尊重状态列中任何单元格内的 HTML 标记。

可能支持的列类型有 "text"、"number"、"html" 和 "date"。如果没有指定类型，"text" 是默认值。

有关更详细的讨论，我建议您阅读 http://fooplugins.github.io/FooTable/docs/getting-started.html 上的指南并找到 "Column options" 部分。

footable js 删除 table 中的所有表单元素

footable js removes all form elements in the table

html

javascript

jquery

footable

responsive