Insert Column jQuery

by Yusril Maulidan Raji

HTML

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
<fieldset>
  <legend>Manage Time Sheet: </legend>
  <label for="timesheet-name">
    <input type="checkbox" id="checkbox-timesheet-name" class="checkbox" name="checkbox-timesheet-name" checked/>Name
  </label>
  <label for="timesheet-travel">
    <input type="checkbox" id="checkbox-timesheet-travel" class="checkbox" name="checkbox-timesheet-travel" checked/>Travel
  </label>
  <label for="timesheet-work">
    <input type="checkbox" id="checkbox-timesheet-work" class="checkbox" name="checkbox-timesheet-work" checked/>Work
  </label>
  <label for="timesheet-total">
    <input type="checkbox" id="checkbox-timesheet-total" class="checkbox" name="checkbox-timesheet-total" checked/>Total
  </label>
</fieldset>
<fieldset>
  <legend>Preview Time Sheet: </legend>
  <!-- Time registration -->
  <div id="table-timesheet-preview" class='{MO-CSS-CLASS value="TimeSheet"}'>
    <b>{MO-LABEL value="Timesheet"}</b>
    <table class="dpTimeReg" border='1'>
      <thead>
        <tr>
          <th rowspan="2" class="dpFirst column-timesheet-name">
            Name
          </th>
          <th colspan="2">
            Mon
          </th>
          <th colspan="2">
            Tue
          </th>
          <th colspan="2">
            Wed
          </th>
          <th colspan="2">
            Thu
          </th>
          <th colspan="2">
            Fri
          </th>
          <th colspan="2">
            Sat
          </th>
          <th colspan="2">
            Sun
          </th>
          <th colspan="2">
            Total
          </th>
        </tr>
        <tr>
          <th>
            Travel
          </th>
          <th>
            Work
          </th>
          <th>
            Travel
          </th>
 ...

JavaScript

$("#myTable tr:first").append("<td>Delete Column LINK</td>");

$('#checkbox-timesheet-name').change(function () {
  if ($(this).is(":checked")) {
    //var c = $("#table-timesheet-preview thead th").length;
    //$("#table-timesheet-preview thead tr").append("<th><a href=''>Delete</a> Col " + (c + 1) + "</th>");
    //$("#table-timesheet-preview tr:gt(0)").append("<td>Col</td>");
    $("#table-timesheet-preview thead tr:first").prepend( '<th rowspan="2" class="dpFirst column-timesheet-name">Name</th>');
    $("#table-timesheet-preview tbody tr:first").prepend( '<td class="dpFirst column-timesheet-name">Name</td>' );
    //$("#table-timesheet-preview tr:first").append("<td>Delete Column LINK</td>");
  } else {
    $('.column-timesheet-name').remove();
  }
});