jQuery vLookUp

Two Column

by dixalex

HTML

<table border=0 cellpadding=0 cellspacing=0 width=413 style='border-collapse:
 collapse;width:310pt'>
<!--StartFragment-->
 <col width=245 style='mso-width-source:userset;mso-width-alt:8960;width:184pt'>
 <col width=168 style='mso-width-source:userset;mso-width-alt:6144;width:126pt'>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left width=245 style='height:15.0pt;width:184pt'>mddStandards</td>
  <td align=left width=168 style='width:126pt'>S172004701</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Afrikaans (South Africa) -
  AFK<span style='mso-spacerun:yes'> </span></td>
  <td align=left>Bangali</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Arabic (U.A.E.) - ARU</td>
  <td align=left>Chinese (Simplified)</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Chinese (Simplified, PRC) -
  CHS<span style='mso-spacerun:yes'> </span></td>
  <td align=left>Chinese (Traditional)</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Chinese (Traditional, Hong
  Kong S.A.<span style='mso-spacerun:yes'> </span></td>
  <td align=left>Czech</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Czech (Czech Republic) -
  CSY<span style='mso-spacerun:yes'> </span></td>
  <td align=left>Dutch</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Danish (Denmark) - DAN</td>
  <td align=left>English</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>Dutch (Netherlands) - NLD<span
  style='mso-spacerun:yes'> </span></td>
  <td align=left>Egyptian</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td height=20 align=left style='height:15.0pt'>English (Australia) - ENA<span
  style='mso-spacerun:yes'> </span></td>
  <td...

CSS

.colOne {
  background-color: #ACE;
}

.colTwo {
  background-color: #FAF;
}

td {
  border: solid 1px #000;
}

.rowOne {
  background-color: #000;
  font-weight: bold;
  color: #FFF;
}

JavaScript

$("tr").each(function() {
  $(this).find('td:eq(0)').addClass("colOne");
});
$("tr").each(function() {
  $(this).find('td:eq(1)').addClass("colTwo");
});

var tdPeriod = $("td");

tdPeriod.each(function() {
  var tdText = $(this).text().toString();
  var replaceTD = tdText.replace(/\./g, "").replace(/\,/g, "").toString();
  $(this).text(replaceTD)
});

$('td.colOne').each(function(x) {
  for (i = 0, z = $('.colTwo').length; i < z; i++) {
    var c2Text = $("td.colOne:eq('" + x + "')").text().toString();
    var rowArr = c2Text.split(" ").splice(0, 1);
    $("td.colTwo:contains('" + rowArr[i] + "')").css("color", "#FFF").addClass(rowArr[i]);
    if ($("." + rowArr[i] + "").length > 0) {
      console.log(rowArr[i]);
    }
  }
});

$('tr:eq(0) td').addClass("rowOne").css("background-color", "#000");

$('.colTwo').each(function() {
  var coldText = $(this).text().toString();
  var colTD = coldText;
  $(this).text(colTD)
});