Collapsible Rows on Table

Collapsible Rows on Table with dynamic create, remove and calendar options

by Dhanck

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css">
<table class="table table-bordered table-condensed table-striped table-hover">
  <thead>
    <tr>
      <th width="80">
        <input type="checkbox"> Year</th>
      <th>SysDate(k)</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">
      <td colspan="2">
        <input type="checkbox" class="checkAll"> 2015
        <span class="arrow" href="#">        
          <span class="glyphicon glyphicon-chevron-right arrow-img rotate2"></span>
        </span>

        <span class="pull-right"> Add date <i class="glyphicon glyphicon-plus"></i></span></td>
    </tr>
    <tr class="collapse row1">
      <td>
        <input type="checkbox">
      </td>
      <td>
        <div class="row col-xs-12">
          <div class="right-inner-addon">
            <span class="glyphicon glyphicon-calendar" id="dpd1"></span>
            <input type="text" class="form-control datePicker" placeholder="Date" name="date" />
          </div>
        </div>
        <div class="deletedate">
          <span class="glyphicon glyphicon-remove deleterow"></span>
        </div>
      </td>
    </tr>
    <tr class="collapse row1">
      <td>
        <input type="checkbox">
      </td>
      <td>
        <div class="row col-xs-12">
          <div class="right-inner-addon">
            <span class="glyphicon glyphicon-calendar" id="dpd2"></span>
            <input type="text" class="form-control datePicker" placeholder="Date" name="date" />
          </div>
        </div>
        <div class="deletedate">
          <span class="glyphicon glyphicon-remove deleterow"></span>
        </div>
      </td>
    </tr>
    <tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
      <td colspan="2">
   ...

CSS

body {
  margin: 30px;
  font-family: century gothic;
}

table .collapse.in {
  display: table-row;
}

.clickable td {
  background-color: rgba(66, 181, 202, 0.99)!important;
  color: #fff;
  font-weight: bold;
}

td input[type=checkbox]:not(.checkAll) {
  margin-left: 30px;
  margin-top: 10px;
}

.right-inner-addon span {
  position: absolute;
  right: 0px;
  padding: 10px 22px;
  pointer-events: none;
}

.deletedate {
  position: absolute;
  right: 0px;
  padding: 10px 44px;
  cursor: pointer;
}

.rotate {
  transform: rotate(90deg);
  /*transform: rotate(180deg);*/
  transition: .3s;
}

.rotate2 {
  transform: rotate(0deg);
  transition: .3s;
}

JavaScript

//Checkbox multiselect
$('.checkAll').on('click', function() {
  if ($(this).is(':checked')) {
    $(this, '.clickable').find('input[type="checkbox"]').prop('checked', 'checked');
  } else {
    $(this, '.clickable').find('input[type="checkbox"]').prop('checked', '');
  }
});
//Add Delete rows
var rowsnum = $('table tr').length;
console.log(rowsnum);
$('.deleterow').on('click', function() {
  $(this).closest('tr').remove();
});
$('.addrow').on('click', function() {
  event.preventDefault();

  //$('#myTable tr:last').after
  $('table tr:last').after('<tr class="collapse row2"><td><input type="checkbox"></td><td><div class="row col-xs-12"><div class="right-inner-addon"><span class="glyphicon glyphicon-calendar" id="dpdi6"></span><input type="text" class="form-control datePicker" placeholder="Date" name="date"/></div></div><div class="deletedate"><span class="glyphicon glyphicon-remove deleterow"></span></div></td></tr>');
  e.stopPropagation();
});

//Arow rotation
$(this).click(function() {
		//arrow_rot();
  $(event.target).closest('tr').find('.arrow-img').toggleClass('rotate');
  $('.arrow-img').toggleClass('rotate2');
});

//Add calendar
$(document).ready(function() {
  $('.datePicker')
    .datepicker({
      format: 'mm/dd/yyyy'
    })
    .on('changeDate', function(e) {
      // Revalidate the date field
      $('#eventForm').formValidation('revalidateField', 'date');
    });

  $('#eventForm').formValidation({
    framework: 'bootstrap',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      name: {
        validators: {
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      date: {
        validators: {
          notEmpty: {
            message: 'The date is required'
          },
          date: {
            format: 'MM/DD/YYYY',
            message: 'The date is not a valid'
          }
    ...