Table to test javascript

Table to test javascript

by litespeedtdf

HTML

<table id="patientsTable" class="dataTable type2 tablesorter tablesorter-blue" role="grid" aria-describedby="patientsTable_pager_info">
  <thead>
    <tr role="row" class="tablesorter-headerRow">
      <th id="thFirstname" data-column="0" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="patientsTable" unselectable="on" aria-sort="none" aria-label="First Name: No sort applied, activate to apply an ascending sort"
      style="user-select: none;">
        <div class="tablesorter-header-inner">First Name</div>
      </th>
      <th id="thLastName" data-column="1" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="patientsTable" unselectable="on" aria-sort="none" aria-label="Last Name: No sort applied, activate to apply an ascending sort"
      style="user-select: none;">
        <div class="tablesorter-header-inner">Last Name</div>
      </th>
      <th id="thDateOfBirth" data-column="2" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="patientsTable" unselectable="on" aria-sort="none" aria-label="Date of Birth:: No sort applied, activate to apply an ascending sort"
      style="user-select: none;">
        <div class="tablesorter-header-inner">Date of Birth:</div>
      </th>
      <th id="thCurrentVisitNum" data-column="8" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="patientsTable" unselectable="on" aria-sort="none" aria-label="Current/Last Visit #: No sort applied, activate to apply an ascending sort"
      style="user-select: none;">
        <div class="tablesorter-header-inner">Current/Last Visit #</div>
      </th>
      <th id="thNumberOfDevices" data-column="9" class="tablesorter-header tablesorter-headerDesc"...

CSS

/*************
Default Theme
*************/


/* overall */

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


/*-- 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;
}

table.dataTable th.sort a {
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 15px;
}

table.dataTable th.sort.up a {
  background-image: url(../content/images/btn_sortup.png);
}

table.dataTable th.sort.down a {
  background-image: url(../content/images/btn_sortdown.png);
}

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;
 ...

JavaScript

$(function() {

  $('#patientsTable > tbody > tr > td > button').on('click', function(eventObject) {
    // Get the # Device td that's next to the button clicked.
    var tdAnchor = $(this).closest('td').prev('td:has(a)');
    //console.info($($(tdAnchor).parents(1)).text());
    var tdNoHtml = $(this).closest('td').prev('td');

    if ($(tdAnchor).text()) {
      var d = parseInt($(tdAnchor).text(), 10);
      d += 1;
      console.info('tdAnchor: ' + $(tdAnchor).text());
      $(tdAnchor).find('a').text(d);
    } else {
      console.info('tdNoHtml: ' + $(tdNoHtml).text());
      $(tdNoHtml).text('').append("<a href='#' style='text-decoration: underline;'>" + 1 + "</a>");
      addDeviceLinkHandler($(tdNoHtml).find('a'));
    }


  });

  $('#patientsTable > tbody > tr > td > a').on('click', linkHandler);

  /*
  // Get the # Device td that's next to the button clicked.
	var tdAnchor = $(this).closest('td').prev('td:has(a)');
  //console.info($($(tdAnchor).parents(1)).text());
  var tdNoHtml = $(this).closest('td').prev('td');
  
  if($(tdAnchor).text()){
  	var d = parseInt($(tdAnchor).text(),10);
    d += 1;
  	console.info('tdAnchor: ' + $(tdAnchor).text());
    $(tdAnchor).text(d);
  }else {
  	console.info('tdNoHtml: ' + $(tdNoHtml).text());
  } 
   */

  //alert($(this).text());



  function linkHandler(eventObject) {

    $('#deviceDetailsDialog').dialog({
      autoOpen: false,
      model: true,
      height: 400,
      width: 350,

      buttons: [{
        text: 'Ok',
        click: function() {
          $('#deviceDetailsDialog').dialog("close");
        }
      }, {
        text: 'Cancel',
        click: function() {
          $('#deviceDetailsDialog').dialog("close");
        }
      }]
    });

    $('#deviceDetailsDialog').dialog('open');


  }

  function addDeviceLinkHandler(deviceLink) {
    $(deviceLink).on('click', linkHandler);
  }





  /*
    var row = $($('#patientsTable > tbody > tr > td > button')[4]).closest('tr');
   ...