Javascript 表格标题上的“切换”按钮仅在两次切换后起作用

我有一个具有搜索功能的表，单击切换按钮时，将在表列标题中打开搜索输入。再次单击按钮时，它将恢复为列名。然而，这个功能只在点击两下后才起作用，然后引入了一些奇怪的样式，我不知道它是从哪里来的

下面是javascript：

$('#action_btn').on('click', function (event) {

if (document.getElementById("toggle_id").value == "OFF") {

    // Setup - add a text input to each footer cell
    $('#example thead th').each(function () {
        var title = $('#example tfoot th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        document.getElementById("toggle_id").value = "ON";
    });

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).header()).on('keyup change', function () {
            table.column(colIdx)
                .search(this.value)
                .draw();
        });
    });

} else {
    // Remove a text input to each footer cell
    $('#example thead th').each(function () {
        var title = $('#example tfoot th').eq($(this).index()).text();
        $(this).html('<th>'+title+'</th>');
        document.getElementById("toggle_id").value = "OFF";
    });
}
});

$（'action'u btn'）。在（'click'，函数（事件）{
if（document.getElementById（“toggle_id”）.value==“OFF”）{
//设置-向每个页脚单元格添加文本输入
$（'#示例thead th'）。每个（函数（）{
var title=$（'#示例tfoot th'）.eq（$（this.index（））.text（）；
$（this.html（“”）；
document.getElementById（“toggle_id”）.value=“ON”；
});
//数据表
变量表=$（“#示例”）.DataTable（）；
//应用搜索
table.columns（）.eq（0）.each（函数（colIdx）{
$（'input'，table.column（colIdx）.header（））.on（'keyup change'，function（）{
表.列（colIdx）
.search（此.value）
.draw（）；
});
});
}否则{
//删除每个页脚单元格的文本输入
$（'#示例thead th'）。每个（函数（）{
var title=$（'#示例tfoot th'）.eq（$（this.index（））.text（）；
$（this.html（“”+title+“”）；
document.getElementById（“toggle_id”）.value=“OFF”；
});
}
});

我有一把小提琴，可以更容易地查看我的代码：

如何确保按钮按以下方式切换搜索 默认值：关闭 切换：开/关

使用class属性，而不是在div标记上使用value属性。根据需要切换此属性

由于value不是div的有效属性，因此DOM不会选择它。将属性值显式设置为“开”或“关”后。它把它捡起来了

这是最新消息

切换id元素

<div id="toggle_id" class="OFF">

---

我对你的小提琴做了一些改动

我已经删除了表外的

#toggle_id

div，并提供了一个

数据值

属性

检查这个

$（文档）。在（'click'，'操作'u btn'，函数（事件）{
if（$（“#切换#id”）.attr（“数据值”）=“关”）{
console.log（$（“#toggle_id”）.data（“value”）；
//设置-向每个页脚单元格添加文本输入
$（'#示例thead th'）。每个（函数（）{
var title=$（this.text（）.replace（'Search'，''）；
$（this.html（“”）；
$（“#toggle_id”）.attr（“数据值”，“打开”）；
});
//数据表
变量表=$（“#示例”）.DataTable（）；
//应用搜索
table.columns（）.eq（0）.each（函数（colIdx）{
$（'input'，table.column（colIdx）.header（））.on（'keyup change'，function（）{
表.列（colIdx）
.search（此.value）
.draw（）；
});
});
}否则{
//设置-删除每个页脚单元格的文本输入
$（'#示例thead th'）。每个（函数（）{
var title=$（this.find（'input'）.attr（'placeholder'）；
$（this）.removeAttr（'class tabindex aria controls rowspan colspan aria sort aria label style'）.html（title）；
$（“切换id”）.attr（“数据值”、“关闭”）；
});
}
});

你能把问题列在一起吗？是第一次切换不起作用还是样式不起作用，还是两者都起作用？检查此小提琴->尝试修复第一次切换问题。哥们！从这里开始试试。。至少消除了初始缺火。刚刚用JQuery替换了普通选择器：因为，您是基于“toggle_id”的值来切换它的，所以我刚刚用隐藏字段替换了div，这对我很有效。将此行“”更改为“”，这很好，但为什么表格标题的初始样式与切换后应用的样式不同？您在标题中添加了一些输入元素。这就是为什么页眉会发生变化，如果我没有正确理解，好的，有没有办法使初始状态/样式与后期切换样式保持一致？

if ($("#toggle_id.OFF").length > 0) {

$(document).on('click', '#action_btn', function (event) {

    if ($("#toggle_id").attr("data-value") == "OFF") {
        console.log($("#toggle_id").data("value"));
        // Setup - add a text input to each footer cell
        $('#example thead th').each(function () {
            var title = $(this).text().replace('Search ', '');
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            $("#toggle_id").attr("data-value", "ON");
        });

        // DataTable
        var table = $('#example').DataTable();

        // Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change', function () {
                table.column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

    } else {
        // Setup - remove a text input to each footer cell
        $('#example thead th').each(function () {
            var title = $(this).find('input').attr('placeholder');             
            $(this).removeAttr('class tabindex aria-controls rowspan colspan aria-sort aria-label style').html(title);
            $("#toggle_id").attr("data-value", "OFF");
        });
    }
});