Convert Table structure menu to UL using jQuery

Convert Table structure menu to UL using jQuery

by Md Hidaytullah Rahmani

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table cellspacing="0" cellpadding="0" border="1" class="old-table-menu nav-row-report ctl00_Menu_2" id="ctl00_Menu">
  <tbody>
    <tr>
      <td id="ctl00_Menun0" title="Click For Home" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)"><table cellspacing="0" cellpadding="0" border="0" width="100%">
          <tbody>
            <tr>
              <td style="white-space:nowrap;"><a href="/RCHRPT_Working/UI/Main.aspx" class="ctl00_Menu_1">Home</a></td>
            </tr>
          </tbody>
        </table></td>
      <td style="width:3px;"></td>
      <td id="ctl00_Menun1" title="Click For Maternal Health Reports" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)"><table cellspacing="0" cellpadding="0" border="0" width="100%">
          <tbody>
            <tr>
              <td style="white-space:nowrap;"><a style="cursor:text;" href="#" class="ctl00_Menu_1">Standard Reports</a></td>
              <td style="width:0;"><img style="border-style:none;vertical-align:middle;" alt="Expand Standard Reports" src="/RCHRPT_Working/WebResource.axd?d=YAYach_zykzn7tRotFpEUoKMTdA7CbNloja6HaK02yXGrKECd_OVPfUSWHaGmjnP70oF6y7z7V_hV5bzqy8D-o7n-jG_fhHSMPH9Tl7BaYQ1&amp;t=635793225671809273"></td>
            </tr>
          </tbody>
        </table></td>
      <td id="ctl00_Menun2" title="Click For SMS" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverStatic(this)"><table cellspacing="0" cellpadding="0" border="0" width="100%">
          <tbody>
            <tr>
              <td style="white-space:nowrap;"><a href="/RCHRPT_Working/SMS/SMS_Register_MobileNo.aspx" class="ctl00_Menu_1">SMS</a></td>
            </tr>
          </tbody>
        </table></td>
      <td style="width:3px;"></td>
      <td id="ctl00_Menun3" title="Migrated Data" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)"...

CSS

ul li {display:inline-block}
ul li a{display:inline-block; background:#ccc; margin:2px; padding:5px; text-decoration: none; font-size:14px; color:#000}

JavaScript

$(document).ready(function(){
	//Contain reusable things in variable
	var targetTableCls = "table.old-table-menu";
	var convertedMenuCls = "new-menu";	
	var $anchorTarget = $(targetTableCls+" table a");
	//add ul
	$(targetTableCls).after('<ul class="'+convertedMenuCls+'"></ul>');
	for(var i=0; i<$anchorTarget.length; i++){
		var $eachAnchor = $anchorTarget.eq(i);
		//get anchor markup from table
		var getAnchor = $eachAnchor.parent().html();
		//append anchor on created ul
		$("."+convertedMenuCls).append("<li>"+getAnchor+"</li>");
		//hide old icon - if you've icon as a image in old table markup
		$eachAnchor.parent().parent().find("img").hide();
		//Add new icon
		$eachAnchor.parent().parent().find("img").after("<span>+</span>");
	}
	//Remove table completly
	$(targetTableCls).remove();
});