title: Disable a column with JavaScript?
body: <p>I want to disable a column on my table with JS, using a button.</p>
  
  <p>I looked on the internet for a solution but didn't find one.
  Is it because my table is created by JS?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="fr" &gt;
     &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Bootstrap Table - Filter control&lt;/title&gt;
        &lt;link rel='stylesheet' href='css/bootstrap.css'&gt;
        &lt;link rel='stylesheet' href='css/bootstrap-table.css'&gt;
        &lt;link rel='stylesheet' href='css/bootstrap-editable.css'&gt;
        &lt;link rel="stylesheet" href="css/style.css"&gt;
        &lt;script src='js/jquery.js'&gt;&lt;/script&gt;
        &lt;script src='js/bootstrap.js'&gt;&lt;/script&gt;
        &lt;script src='js/bootstrap-table.js'&gt;&lt;/script&gt;
        &lt;script src='js/bootstrap-table-editable.js'&gt;&lt;/script&gt;
        &lt;script src='js/bootstrap-table-export.js'&gt;&lt;/script&gt;
        &lt;script src='js/tableExport.js'&gt;&lt;/script&gt;
        &lt;script src='js/bootstrap-table-filter-control.js'&gt;&lt;/script&gt;
        &lt;script  src="js/index.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div class="container"&gt;
           &lt;h1&gt;Bootstrap Table&lt;/h1&gt;
           &lt;p&gt; Mémo pour les options du Bootstrap Table : &lt;a href="http://bootstrap-table.wenzhixin.net.cn/documentation/"&gt;Bootstrap Table Documentation&lt;/a&gt;&lt;/p&gt;
           &lt;p&gt;Eléments de Bootstrap Table utilisés : &lt;a href="http://jsfiddle.net/wenyi/e3nk137y/3178/"&gt;Data Checkbox&lt;/a&gt;, pour cocher les éléments à sélectionner, &lt;a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/filter-control.html"&gt;extension Filter control&lt;/a&gt;, pour les filtres via les colonnes, &lt;a href="https://github.com/kayalshri/tableExport.jquery.plugin"&gt;extension Data export&lt;/a&gt; pour exporter&lt;/p&gt;
           &lt;div id="toolbar"&gt;
              &lt;select class="form-control"&gt;
                 &lt;option value=""&gt;Export Basic&lt;/option&gt;
                 &lt;option value="all"&gt;Export All&lt;/option&gt;
                 &lt;option value="selected"&gt;Export Selected&lt;/option&gt;
              &lt;/select&gt;
  
           &lt;/div&gt;
           &lt;table id="table" class="table"
              data-toggle="table"
              data-search="true"
              data-filter-control="true" 
              data-show-export="true"
              data-click-to-select="true"
              data-toolbar="#toolbar"&gt;
              &lt;thead&gt;
                 &lt;tr&gt;
                    &lt;th id="column-a" style="visibility: hidden; display: none;"&gt;1&lt;/th&gt;
                    &lt;th data-field="state" data-checkbox="true"&gt;&lt;/th&gt;
                    &lt;th data-field="prenom" data-filter-control="input" data-sortable="true"&gt;Prénom&lt;/th&gt;
                    &lt;th data-field="date" data-filter-control="select" data-sortable="true"&gt;Date&lt;/th&gt;
                    &lt;th data-field="examen" data-filter-control="select" data-sortable="true"&gt;Examen&lt;/th&gt;
                    &lt;th data-field="note" data-sortable="true"&gt;Note&lt;/th&gt;
                 &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="tbody"&gt;
                 &lt;div id="tabs1" class="tabs"&gt;
  
                    &lt;/div&gt;
              &lt;/tbody&gt;
           &lt;/table&gt;
  
        &lt;/div&gt;
        &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="js/tableaujs.js"&gt;&lt;/script&gt;
  
        &lt;button type="button" data-column="#column-a" id="bouton"&gt;Hide/show 1st&lt;/button&gt;
        &lt;script&gt;
  
        $(document).on("click", "[data-column]", function () {
  
           var button = $(this),
              header = $(button.data("column")),
              table = header.closest("table"),
              index = header.index() + 1,
  
              selector = "tbody div tr td:nth-child(" + index + ")",
              column = table.find(selector).add(header);
  
              alert(button.data("column") + " index" + index);
              // selector = "tbody div tr td:nth-child(1)";
              // column = table.find(selector).add(header);
           column.toggleClass("hidden");
         });
         &lt;/script&gt;
  
  
     &lt;/body&gt;
  &lt;/html&gt;
  
  
  var utilisateur = [                                       // donnée du tableau
    {
      id: 1,
      checked: false,
      prenom: "Dolores",
      date: "Fermière",
      examen: "host",
      note: "ww.dolores@gmail.com"
    },
    {
      id: 2,
      checked: true,
      prenom: "Bernard",
      date: "Robopsycologue",
      examen: "abdel",
      note: "ww.bernard@gmail.com"
    }
  ];
  
  for (let i = 0; i &lt; 100; i++) {
    var row = document.createElement("tr");                   // créer le tableau
    var atr2 = document.createAttribute("id");
    atr2.value = utilisateur[i].id;
    row.setAttributeNode(atr2);
  
    var cell0 = document.createElement("td");
    // var atr1 = document.createAttribute("id");
    // atr1.value = utilisateur[i].id;
    // cell0.setAttributeNode(atr1);
  
    var cell1 = document.createElement("td");                 // créer l'élément
  
    var atr = document.createAttribute("class");              // créer l'attribut
    atr.value = "bs-checkbox";
    cell1.setAttributeNode(atr);
    var para = document.createElement("input");
    var para1 = document.createAttribute("data-index");
    var para2 = document.createAttribute("name");
    var para3 = document.createAttribute("type");
    para1.value = "0";
    para2.value = "btSelectItem";
    para3.value = "checkbox";
    para.setAttributeNode(para1);
    para.setAttributeNode(para2);
    para.setAttributeNode(para3)
    cell1.appendChild(para);
  
  
  
    // var cell1 = '&lt;td class="bs-checkbox"&gt;&lt;/td&gt;'
    //alert(cell1).innerText;
    var cell2 = document.createElement("td");                 // créer l'élément
    var cell3 = document.createElement("td");
    var cell4 = document.createElement("td");
    var cell5 = document.createElement("td");
    var cell6 = document.createElement("td");
    var cell7 = document.createElement("td");
    var cell8 = document.createElement("td");
    cell0.innerText = utilisateur[i].id;
    cell1.innerText = utilisateur[i].checked
    cell2.innerText = utilisateur[i].prenom;   
    cell3.innerText = utilisateur[i].date;
    cell4.innerText = utilisateur[i].examen;
    cell5.innerText = utilisateur[i].note;
    row.appendChild(cell0);                                    // afficher dans le tableau la cellule 
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    row.appendChild(cell5);
    // row.appendChild(cell6);
    // row.appendChild(cell7);
    // row.appendChild(cell8);
  
    // document.getElementsById("tbody")[0].appendChild(row);
  
    // var elem = document.getElementsById("tabs1");
    // var mychild = document.getElementById("")
    // elem.insertBefore(mypara, mychild);
    // elem.appendChild(row);
    var element = document.getElementById("tbody");           // afficher le tableau
    element.appendChild(row);                                 // afficher le tableau
  }
  
  $(document).ready(function(){
      $(cell1).toggleClass("bs-checkbox");
    });
  
  
  
  
  // hidden une column
  
  //   $(document).on("click", "[data-column]", function () {
  //     alert("coucou");
  //     var button = $(this),
  //         header = $(button.data("column")),
  //         table = header.closest("table"),
  //         index = header.index() + 1,
  //         selector = "tbody tr td:nth-child(" + index + ")",
  //         column = table.find(selector).add(header);
  
  //     column.toggleClass("hidden");
  //   });
  </code></pre>
  
  <p>I want to disable the "ID" column with a button to either show or not show the column. So I would try some jQuery but I'm not really familiar with jQuery. So I'm asking, how can I disable with a button my column?</p>