JQuery函數按鈕點擊hmtl頁面1，影響html頁面的列數2

我想弄清楚如何從buttons.html中獲取用戶按鈕點擊動態切換第二個列的可見性userinput.html。我爲userinput.html表使用DataTables，並認爲我的解決方案是column.visible。在DataTables手冊中有一個點擊<a>並切換列可視性的示例。我試圖在HTML文件中應用該邏輯。不幸的是，我試過的代碼沒有工作。下面是我得到了什麼：JQuery函數按鈕點擊hmtl頁面1，影響html頁面的列數2

按鈕Page

<!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>

用戶輸入PAGE

<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>

$(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()); 
    }); 
}); 
;

有在任HMTL頁面的控制檯沒有錯誤。我認爲這個錯誤可能是關鍵字this的使用，但我不確定如何調整代碼以跨HTML文件應用。

不需要將按鈕放在單獨的頁面上，實際上，我會非常樂意接受任何建設性的批評。

預先感謝您。

來源

2017-05-26 samsmug

您可以點擊一個頁面上的按鈕在另一個頁面上切換（或任何效果）？所以你可以使用webStorage（localstorage，sessionstorga）或cookies（閱讀aboit這個）或者像這樣的東西。你點擊按鈕並在第一頁上使用腳本，但是當你跳到另一個時，你的js正在重新啓動，所以你想要存儲你的數據。

來源

2017-05-26 15:02:44

感謝您的回覆@Emil。爲了確保我明白，如果我使用localStorage，我將能夠跟蹤用戶在buttons.html上選擇哪些按鈕，並且當他們移動到userinput.html頁面時，他們將看到已被製作爲可見/隱藏的列JS。對？ – samsmug

JQuery函數按鈕點擊hmtl頁面1，影響html頁面的列數2

回答

相關問題