jQuery add button to table heads-CodePudding

Using jQuery I have a button Hide Columns option. I want to add a button to each column head in the table. Having added by jQuery is preferred. The Button will hide it's respective column. It appears that the button when appended does not utilize the jQuery to hide column. I have copied and pieced different parts together. Please help me I don't really know this.

$(document).ready(function(){
  $("#btn").click(function(){
    $("th").append('<button  data-toggle="tooltip" data-placement="bottom" title="Hide Column">H</button>' );
  });
});

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var colIndex = $cell[0].cellIndex   1;

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child("   colIndex   ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style></style>
</head>
<body>

<button id="btn">Hide Columns option</button>

<table >

  <thead>
    <tr>
      <th>
        Controller

      </th>
      <th>
        Action
        <button  data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          x  
        </button>
      </th>
      <th>
        Type
      </th>

  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
    </tr>

  </tbody>
  <tfoot >
    <tr>
      <th colspan="4"><a  href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>


</body>
</html>

CodePudding user response：

I hope this is you want:

UPDATE:

(function ($) {
  $.fn.clickToggle = function (func1, func2) {
    var funcs = [func1, func2];
    this.data("toggleclicked", 0);
    this.click(function () {
      var data = $(this).data();
      var tc = data.toggleclicked;
      $.proxy(funcs[tc], this)();
      data.toggleclicked = (tc   1) % 2;
    });
    return this;
  };
})(jQuery);

//NEW FUNCTION:

function addColumnsOption(view, className) {
  if (view == 1) {
    $("#myTable thead tr th").append(
      "<button class='pull-right btn btn-sm btn-danger btn-condensed "  
        className  
        "'><i class='bi bi-trash3'></i></button>"
    );
  } else if (view == 0) {
    $("#myTable thead tr th ."   className   "").remove();
  }
}
  
$(document).ready(function () {

  $("#btn").clickToggle(
    function () {
      addColumnsOption(1, "removeButton"); //1 for show

      let theadThLength = $("#myTable thead th").length;
      for (let i = 0; i < theadThLength; i  ) {
        
        $(".removeButton").eq(i).click(function () {
            let tbodyTrLength = $("#myTable tbody tr").length;
            
            for (let t = 0; t < tbodyTrLength; t  ) {
              $("#myTable tbody tr").eq(t).find("td").eq(i).hide();
              $("#myTable thead th").eq(i).hide();
              $(".footer-restore-columns").removeClass("d-none");
            }
            
          });
          
      }
    },
    function () {
      addColumnsOption(0, "removeButton"); //0 for hide
    }
  );

  $(".restore-columns").click(function () {
    $("#myTable tbody tr td").show();
    $("#myTable thead th").show();
    $(".footer-restore-columns").addClass("d-none");
  });
  
});

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<button  id="btn">Show Columns option</button>

<table id="myTable" >

  <thead>
    <tr>
      <th>
        Controller
     
      </th>
      <th>
        Action
  
      </th>
      <th>
        Type
  
      </th>

  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
    </tr>

  </tbody>
  <tfoot >
    <tr>
      <th colspan="4"><a  href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>