ria/app/Views/publicholidays.php

<script src="<?php echo base_url() ?>public/assets/lightswitch/lightswitch/lib/jquery.tabletojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="<?php echo base_url() ?>public/assets/lightswitch/lightswitch/lib/jquery.tabletojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
  $(function() {

    $("#hdate").datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      yearRange: '-100:+0'
    });
  });
  $('html').bind('keypress', function(e) {
    //alert('Key Pressed');
    if (e.keyCode == 13) {
      return false;
    }
  });
</script>

<style type="text/css">
  .num {
    text-align: right;
  }
</style>

<div class="content-page">
  <div class="content">
    <!-- Start Content-->
    <div class="container-fluid">
      <!-- start page title -->
      <div>
        <div class="row">
          <div class="col-6">
            <div class="page-title-box page-title-box-alt">
              <h4 class="page-title"> Public Holiday Information - <?php echo date('Y'); ?></h4>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="row" style="padding-left: 26px;">
                <div class="col-md-3">
                  <span>Holiday Name : </span>
                  <input type="text" name="hname" id="hname" class="form-control">
                </div>
                <div class="col-md-3">
                  <span>Date : </span>
                  <input type="text" name="hdate" id="hdate" class="form-control">
                </div>
                <div class="col-md-3">
                  <input type="button" id="Add" value="Add" class="btn btn-success" class="form-control" style="margin-top: 20px;margin-bottom: 0px;">
                </div>
              </div>
              <div class="card-body">
                <table id="phdays" class="table dt-responsive nowrap w-100 ria_data_table">
                  <thead>
                    <tr>
                      <!-- <th>S.No</th> -->
                      <th>Holiday_Name</th>
                      <th>Date</th>
                      <th style="width:10%" ;>Action</th>
                    </tr>
                  </thead>
                  <tbody id="db">
                    <?php
                    $index = 0;
                    $testarray = array();
                    if (!empty($days)) {
                      foreach ($days as $day) {
                        $index++;
                        $date = date_create($day->H_Date);
                        $date = date_format($date, 'd-m-Y');
                    ?>
                        <tr id="<?php echo $index; ?>">
                          <!--  <td style="text-align:right;"><?php echo $index ?></td> -->
                          <td contenteditable='true' style="text-align:left;"><?php if (!empty($day->H_Name)) {
                                                                                echo $day->H_Name;
                                                                              } else {
                                                                                echo "NO DATA";
                                                                              } ?></td>
                          <td contenteditable='false' style="text-align:left;"><?php echo $date; ?></td>
                          <td style="text-align:center;"><a href='#' onclick="DeleteRow(<?php echo $index; ?>)" id="Del"><span class="fas fa-trash"></span></a></td>
                        </tr>
                    <?php
                      }
                    }
                    ?>
                  </tbody>
                </table>
                <p>&nbsp;</p>
                <div class="row">
                  <div class="col-md-4" id="savebutton">
                    <input type="button" id="submit" value="Save" class="btn btn-success">
                  </div>
                </div>
              </div> <!-- end card body-->
            </div> <!-- end card -->
          </div><!-- end col-->
        </div>
      </div>
    </div> <!-- container -->
  </div> <!-- content -->
</div>

<script type="text/javascript" src="<?php echo base_url(); ?>public/assets/js/common.js" charset="utf-8"></script>
<script type="text/html" id="addList">
  <tr>
    <td style="text-align:left;" contenteditable="true"><%=Holiday_Name%></td>
    <td style="text-align:left;" contenteditable="false"><%=Date%></td>
    <td style="text-align:center;">
      <a href='#' onclick="DeleteRow(<?php echo $index; ?>)" id="Del"><span class="fas fa-trash"></span></a>
    </td>
  </tr>
</script>

<script>
  function DeleteRow(rowid) {
    var d = '';
    //alert(rowid);
    var tr = document.getElementById(rowid);
    var Row = $('#phdays').find('tr').eq(rowid).find('td');
    $.each(Row, function(index, value) {
      if (index == 1) {
        d = value.textContent
      }
    });
    // alert(d);
    // $('#content').loader('show');
    $.ajax({
      data: {
        param1: d
      },
      type: "POST",
      url: "<?php echo base_url() ?>monthlypay/deletePublicHoliday",

      success: function(data) {
        // $('#content').loader('hide');
        alert(data);
      }

    });
    tr.parentNode.removeChild(tr);
  }
  $('#Add').click(function() {
    var index = $('#phdays tr').length;
    var H_name = $('#hname').val();
    var H_date = $('#hdate').val();

    if (H_name != '' && H_date != '') {
      var template = jQuery("#addList").html();
      $('#db').append(_.template(template)({
        index: index,
        Holiday_Name: H_name,
        Date: H_date
      }));
      $('#hname').val('');
      $('#hdate').val('');
    }
  });

  $('#submit').click(function() {

    var jsondata = $('#phdays').tableToJSON();
    var jsondata = JSON.stringify(jsondata);

    $('#content').loader('show');
    $.ajax({
      data: {
        param1: jsondata
      },
      type: "POST",
      url: "<?php echo base_url() ?>monthlypay/savePublicHolidays",

      success: function(data) {
        $('#content').loader('hide');
        alert(data);
      }

    });

  });
</script>