Javascript 引导表数据显示列="；“真的”；丢失输入的数据

我使用一个引导表来显示一些数据。我的表格包括几个下拉列表、标签、文本框等。我还包括了

data show columns=“true”

，以允许用户显示/隐藏表格列

我对此功能有问题。如果用户在文本框中输入内容，然后使用列过滤器功能，则在文本框中输入的数据将丢失

这是一本书。有人能告诉我怎么修吗，或者至少给我指出正确的方向

---

谢谢，

之所以会发生这种情况，是因为引导程序正在从DOM中删除对象，而不仅仅是隐藏字段。

您可以根据需要处理以下任何事件并更新表列：

使用

列开关.bs.table

和'search.bs.table'显示/隐藏列（推荐）

值更改或输入框模糊时

以下是代码更改（）：

加成

名称
价格
专栏1
专栏2
专栏3
专栏4
一些
某物

JavaScript

$（文档）。准备好了吗(
函数（）{
$（'body'）。on（'change'，'fname'，function（）{
var nameValue=this.value；
$（“#myDataTable”）.bootstrapTable（'updateRow'{
索引：0，
行：{
名称：“”
}
});
});
$（'body'）。on（'change'，'price'，function（）{
var priceValue=此.value；
$（“#myDataTable”）.bootstrapTable（'updateRow'{
索引：0，
行：{
价格：''
}
});
});
}
);

谢谢。这是一个很好的解决方案。

<table id="myDataTable" data-height="299" data-show-columns="true" data-id-field="id" class="table table-hover table-striped" data-toggle="table" data-search="false" data-filter-control="false"
 data-show-multi-sort="false">
    <thead>
    <tr>
        <th data-field="state" data-radio="true"></th>
        <th data-field="name" data-switchable="true">Name</th>
        <th data-field="price">Price</th>
        <th data-field="column1">Columns1</th>
        <th data-field="column2" data-visible="false">Columns2</th>
        <th data-field="column3" data-switchable="false">Columns3</th>
        <th data-field="column4" data-visible="false">Columns4</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td data-field="state"></td>
            <td data-field="name"><input type="text" name="fname" id="fname" class="fname"></td>
            <td data-field="price"><input type="text" name="price" id="price"></td>
            <td data-field="column1"><input type="text" name="1"></td>
            <td data-field="column2"><input type="text" name="2"></td>
            <td data-field="column3">Somehting</td>
            <td data-field="column4">Something</td>
        </tr>

    </tbody>
</table>

$(document).ready(
    function() {
        $('body').on('change', '#fname', function() {
            var nameValue = this.value;
            $('#myDataTable').bootstrapTable('updateRow', {
                    index: 0,
                    row: {
                        name: '<input type="text" name="fname" id="fname" value="' + nameValue + '"/>'
                    }
                });
        });

        $('body').on('change', '#price', function() {
            var priceValue = this.value;
            $('#myDataTable').bootstrapTable('updateRow', {
                    index: 0,
                    row: {
                        price: '<input type="text" name="price" id="price" value="' + priceValue + '"/>'
                    }
                });
        });
    }
);