TextNode Traversal

S1910655

by dixalex

HTML

<table id="offersLayout" border="1">
  <tr>
    <td>Preferred TV</td>
    <td><span class="channelCount">220+</span> Channels View Lineup
      <br/>Top 100 shows preloaded &amp; ready to watch
      <br/>Most live sports</td>
    <td>$59/mo
      <br/>for the first 12 months
      <br/>See Pricing Details</td>
  </tr>
</table>

CSS

#offersLayout {
	    border-collapse: collapse;
	    border: solid 1px black;
	    margin: 30px auto;
	    font-size: 13.5px;
	    font-family: arial;
	    line-height: 18.5px;
	  }
	  
	  #offersLayout tr td:first-child {
	    background-color: #CCC;
	    font-weight: bold;
	    font-size: .83em;
	    border: solid 1px black;
	    vertical-align: middle;
	    text-align: center;
	  }
	  
	  #offersLayout td {
	    vertical-align: top;
	    border-right: solid 1px #CCC;
	    padding: 15px;
	    text-align: left;
	  }
	  
	  #offersLayout tr td:last-child {
	    vertical-align: top;
	    border-right: solid 1px black;
	    text-align: center;
	  }
	  
	  .channelCount {
	    font-size: 1.55em;
	    font-weight: bold;
	  }
	  
	  .channelWord {
	    font-weight: bold;
	  }
	  
	  .viewWord {
	    font-weight: bold;
	    color: blue;
	    cursor: pointer;
	  }
	  
	  td.lastColumn b {
	    font-size: 1.55em;
	  }
	  
	  td.lastColumn {
	    text-align: center;
	  }
	  
	  .moneyMonth {
	    font-size: 11.5px;
	  }
	  
	  .noBold {
	    font-weight: normal !important;
	  }
	  
	  .priceDetails {
	    font-size: 12.5px;
	    color: blue;
	    cursor: pointer;
	  }

JavaScript

//TextNode Traversal
$("#offersLayout tr td:contains('Channels')").html(function (_, html) {
  return html.split('Channels').join("<span class='channelWord'>Channels</span>");
});
$("#offersLayout tr td:contains('View Lineup')").html(function (_, html) {
  return html.split('View Lineup').join("<span class='viewWord'>View Lineup</span>");
});
if ($(".smallcaps").length < 0) {
  console.log("it Worked")
};

$("#offersLayout tr td").not($("#offersLayout tr td:eq(0), #offersLayout tr td:eq(1)")).each(function () {
  var firstLine = $(this)
    .contents()
    .filter(function () {
      return !!$.trim(this.innerHTML || this.data);
    })
    .first();
  console.log(firstLine.text());
  firstLine.wrap('<b />');
  $(this).addClass("lastColumn");
});
$("#offersLayout tr td:contains('.99/mo')").html(function (_, html) {
  return html.split('.99/mo').join("<sup class='moneyMonth'>.99<span class='noBold'>/mo</span></sup>");
});
$("#offersLayout tr td:contains('/mo')").html(function (_, html) {
  return html.split('/mo').join("<sup class='moneyMonth'><span class='noBold'>/mo</span></sup>");
});
$("#offersLayout tr td:contains('See Pricing Details')").html(function (_, html) {
  return html.split('See Pricing Details').join("<span class='priceDetails'>See Pricing Details</span>");
});