Table Parsing

Test Custom Table Parsing

by litespeedtdf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<table id="printTimesTable" class="dataTable tablesorter " style="width: 100%; margin: 0;">
  <thead>
    <tr class="tablesorter-headerRow">
      <th class="hide">#</th>
      <th style="width: 50px;">Hours</th>
      <th style="width: 50px;">Minute</th>
      <th style="width: 50px;">Print Mode</th>
    </tr>
  </thead>
  <tbody>


    <tr name="PrintTimesRow_[1]">
      <td class="hide" id="PrintTimes[1].Id">
        <span class="tabledit-span" name="id">1</span>
      </td>
      <td style="width: 50px;" id="PrintTimes[1].Hour" >
        <span class="tabledit-span">02</span>
        <select class="hide tabledit-input form-control input-sm" name="Hour" style="">
          <option value="0">00</option>
          <option value="1">01</option>
          <option value="2" selected="">02</option>
          <option value="3">03</option>
          <option value="4">04</option>
          <option value="5">05</option>
          <option value="6">06</option>
          <option value="7">07</option>
          <option value="8">08</option>
          <option value="9">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
        </select>
      </td>
      <td style="width: 50px;" id="PrintTimes[1].Minute">
        <span class="tabledit-span" name="Minute">30</span>
       </td>
      <td style="width: 50px;" id="PrintTimes[1].BatchType">
        <span...

CSS

.hide {
  display: none;
}


/*-- Data Table --*/

table.dataTable {
  width: 100%;
  border-collapse: collapse;
}

table.dataTable thead tr {
  border-bottom: 1px solid #adadad;
  font-weight: normal;
}

table.dataTable thead th {
  border-right: 1px solid #adadad;
  vertical-align: top;
  background-color: #2f64a8;
  color: #ffffff;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.tablesorter {
  width: 100%;
  font: 12px/18px Arial, Sans-serif;
  color: #333;
  background-color: #fff;
  border-spacing: 0;
  margin: 10px 0 15px;
  text-align: left;
}

table.dataTable td {
  font-size: 12px;
}

table.dataTable td.col_chkbox {
  width: 15px;
}

table.dataTable thead th {
  padding: 10px;
  white-space: nowrap;
}

table.dataTable thead th a {
  color: #ffffff;
  display: block;
  padding: 0;
}

table.dataTable span.sortarrow {
  display: inline-block;
  padding-left: 10px;
}

table.dataTable th:last-child {
  border-right-style: none
}

table.dataTable tbody td {
  border-top: 1px solid #adadad;
  border-bottom: 1px solid #adadad;
  border-right: 1px solid #adadad;
  vertical-align: top;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

table.dataTable.type2 tbody td {
  border-bottom: 0 solid #adadad;
}

table.dataTable td:last-child {
  border-right-style: none;
}

table.dataTable tbody tr:nth-child(odd) {
  background-color: #f7f7f7;
}

table.dataTable.nopadding td {
  padding: 0;
}

table.dataTable table.insideDataTable {
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

table.dataTable table.insideDataTable,
table.dataTable table.insideDataTable td {
  margin: 0;
  border: 0;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

table.insideDataTable tr {
  background-color: #000000;
}

table.dataTable.selectable tr:hover {
  background-color: #cccccc;
  cursor: pointer;
}

table.dataTable.selectable tbody td {
  padding: 6px;
  padding-left: 10px;
}

table.dataTable.selectable.thin tbody td {
  padding-top:...

JavaScript

$(function() {

  var rowNameFormat = 'PrintTimesRow';
  var columnIdFormatArray2 = ["PrintTimes", "PrintTimesHour", "PrintTimesMinute", "PrintTimesBatchType"];
   var columnIdFormatArray = ["Id", "Hour", "Minute", "BatchType"];

/*
  	var $table = $('#printTimesTable');
    alert($table.find('tbody tr:not(.hide)').length);
    


        var myfunction = function () {
        	function test(values){
          return {
                id: values[0],
                Hour: values[1],
                Minute: values[2],
                BatchType: values[3]
            };
          }            
        }
   */     
        
 var jj = (function() {    

   function buildResults(values){
          return {
                id: values[0],
                Hour: values[1],
                Minute: values[2],
                BatchType: values[3]
            };
   }   

    return {
        results: buildResults     
    };
})();
		
  $('#build').on('click', function(event) { 
  //console.info(myfunction());
       var rows = $('#printTimesTable > tbody').find("tr:not(.hide)")
        var numberOfRows = $(rows).length;
        var colArray = [];
        var numberOfColumns = columnIdFormatArray.length;    
        var tempValue = '';
        var tempNV = '';
        var objName = 'PrinterPrintTime';

        var tempJValues = [];
        var resultsArray = [];

        for (var i = 0; i <= numberOfRows - 1; i++) {
          var tempRow = rows[i];      
           tempJValues = [];
          for (var j = 0; j < columnIdFormatArray.length; j++) {                
            var tempCol = $(tempRow).find("td[id$='" + columnIdFormatArray[j] + "']");        
            var resultObject = returnValue(tempCol);
            var tempValue = resultObject.value;
            if(colArray.length <= numberOfColumns){              
              if(resultObject)
                colArray.push(resultObject.name);
            }      
           
              if (j < numberOfColumns-1){       ...