Question

我正在尝试弄清楚如何从buttons.html点击用户按钮，以动态切换第二个userinput.html上的列可见性。我在userinput.html表格中使用DataTables，并认为我的解决方案为column.visible。在DataTables手册中，有一个单击<a>并切换列可见性的示例。我试图在html文件中应用该逻辑。不幸的是，我尝试的代码无效。这就是我所拥有的：

按钮页

<!DOCTYPE html>
<html>
<head>
    <title>buttons</title>
  <link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
  <link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>

<h1>Button page</h1>

<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>

用户输入页面

<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
    <thead>
        <tr>
            <th>A</th>
            <th>b</th>
            <th>c</th>
        </tr>
    </thead>
    <tbody>   
        <tr class="ac">
            <td>
                <input type="text" autofocus placeholder="e.g; " name="input" >
            </td>
            <td>
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
        <td>
            <input type="text" placeholder="" name="P" class="h"></td>
    </tr>
    </tbody>
</table>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>

JS

$(document).ready( function () {
    var table = $('#userinput').DataTable(  {
        "paging": false,
        "ordering": false,
        "scrollX" : true,
        "scrollY" : true,
        "scrollCollapse" : true,
        "searching" : false,
        // "stateSave" : true,
      });

    $('button.class1').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
});
;

html页面上的控制台中没有错误。我认为错误可能是使用this关键字，但我不确定如何调整代码以应用于html文件。

不需要将按钮放在单独的页面上，事实上，我感激地接受任何建设性的批评。

提前谢谢。

Answer 1

您可以点击一个页面上的按钮切换另一个页面上的（或任何效果）吗？所以你可以使用webStorage（localstorage，sessionstorga）或cookie（读取这个）或者像这样的东西。您单击按钮并在第一页上使用脚本，但是当您跳到另一个时，您的js正在重新启动，因此您想要存储数据。

单击html第1页按钮的JQuery函数，影响html第2页的列

1 个答案: