javascript create links comparing tag text

Question

javascript create links comparing tag text

Asked 6 years, 6 months ago

Viewed 82 times

1

What better way to make this script slower with or without jquery, the original function has more than 200 lines of changes, and is applied on a page where there are on average 1000 to 1500 tags to change.

has to let the comparison to create faster link?

                    function crLink(){
                var $tbl = $('#frame').find("table[title^='TITULO']");
                $tbl.find("b:contains(CNF)").html(" - LINK <a href='http://www.minasgerais.com.br' target='_blank'><b><font color='blue'>CONFINS </font></b></a>");
                $tbl.find("b:contains(BSB)").html(" - LINK <a href='http://www.df.com.br' target='_blank'><b><font color='blue'>BRASILIA </font></b></a>");
                $tbl.find("b:contains(SSA)").html(" - LINK <a href='http://www.bahia.com.br' target='_blank'><b><font color='blue'>SALVADOR </font></b></a>");
                $tbl.find("b:contains(CGH)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>CONGONHAS </font></b></a>");
                $tbl.find("b:contains(SDU)").html(" - LINK <a href='http://www.riodejaneiro.com.br' target='_blank'><b><font color='blue'>RIO DE JANEIRO </font></b></a>");
                $tbl.find("b:contains(JTC)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>BAURU </font></b></a>");
                $tbl.find("b:contains(PMW)").html(" - LINK <a href='http://www.tocantins.com.br' target='_blank'><b><font color='blue'>PALMAS </font></b></a>");
                }

When run on page with more than 1000 tags to change is with a delay of up to 15 seconds to be applied. The following page is an example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
	<head>
	<script type="text/javascript" src="inc/jquery.js"></script>
	<script>
	function crLink(){
	var $tbl = $('#frame').find("table[title^='TITULO']");
	$tbl.find("b:contains(CNF)").html(" - LINK <a href='http://www.minasgerais.com.br' target='_blank'><b><font color='blue'>CONFINS </font></b></a>");
	$tbl.find("b:contains(BSB)").html(" - LINK <a href='http://www.df.com.br' target='_blank'><b><font color='blue'>BRASILIA </font></b></a>");
	$tbl.find("b:contains(SSA)").html(" - LINK <a href='http://www.bahia.com.br' target='_blank'><b><font color='blue'>SALVADOR </font></b></a>");
	$tbl.find("b:contains(CGH)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>CONGONHAS </font></b></a>");
	$tbl.find("b:contains(SDU)").html(" - LINK <a href='http://www.riodejaneiro.com.br' target='_blank'><b><font color='blue'>RIO DE JANEIRO </font></b></a>");
	$tbl.find("b:contains(JTC)").html(" - LINK <a href='http://www.saopaulo.com.br' target='_blank'><b><font color='blue'>BAURU </font></b></a>");
	$tbl.find("b:contains(PMW)").html(" - LINK <a href='http://www.tocantins.com.br' target='_blank'><b><font color='blue'>PALMAS </font></b></a>");
	}
	</script>
	</head>
	<body>
		<button onclick="crLink()">BOTAO</button>
		<div id="frame">
	<table title="TITULO">
		<tbody>
						<tr>
				<td><b>joao xx xxxxx</b></td><td><b>150</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>maria xx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>ana xx xxxxx</b></td><td><b>190</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mario xx xxxxxxx</b></td><td><b>100</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>claudia xxxxxxx</b></td><td><b>170</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>ricardo xx xxxxxx</b></td><td><b>160</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>eder xx xxxxxx</b></td><td><b>300</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>julia xx xxxxx</b></td><td><b>130</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mara xxx xxxxx</b></td><td><b>200</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>lara xxx xxxxx</b></td><td><b>100</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>beto xxx xxxxx</b></td><td><b>150</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>fabio xxx xxxxx</b></td><td><b>170</b></td><td><b>PMW</b></td>
			</tr>		<tr>
				<td><b>juliano xxx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>marisa xxx xxxxx</b></td><td><b>400</b></td><td><b>CGH</b></td>
			</tr>		<tr>
				<td><b>selena xxx xxxxx</b></td><td><b>160</b></td><td><b>JTC</b></td>
			</tr>
		</tbody>
	</table>
	</div>
	</body>
	</html>

1 answer

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-05-29T22:45:31+00:00

In my view the performance in this case has less weight compared to the ease to organize, maintain data and avoid repetitions, leaving the code cleaner.

I suggest creating an object where you can more easily change the values by creating entries with the data (URL and name) and using only one for...in to insert the links:

function crLink(){
   var $tbl = $("table[title^='TITULO']", '#frame');

   var l1 = " - LINK <a href='http://www.";
   var l2 = "' target='_blank'><b><font color='blue'>";
   var l3 = "</font></b></a>";
   
   var links = {
      // você pode inclusive organizar por ordem alfabética
      // como fiz abaixo
      BSB: { urls: "df.com.br",           nome: "BRASILIA" },
      CGH: { urls: "saopaulo.com.br",     nome: "CONGONHAS" },
      CNF: { urls: "minasgerais.com.br",  nome: "CONFINS" },
      JTC: { urls: "saopaulo.com.br",     nome: "BAURU" },
      PMW: { urls: "tocantins.com.br",    nome: "PALMAS" },
      SDU: { urls: "riodejaneiro.com.br", nome: "RIO DE JANEIRO" },
      SSA: { urls: "bahia.com.br",        nome: "SALVADOR" }
   }
   
   for(var i in links){
      $("b:contains('"+i+"')", $tbl).html(
         l1
         +links[i].urls
         +l2
         +links[i].nome
         +l3
      );
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="crLink()">BOTAO</button>
<div id="frame">
	<table title="TITULO">
		<tbody>
						<tr>
				<td><b>joao xx xxxxx</b></td><td><b>150</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>maria xx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>ana xx xxxxx</b></td><td><b>190</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mario xx xxxxxxx</b></td><td><b>100</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>claudia xxxxxxx</b></td><td><b>170</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>ricardo xx xxxxxx</b></td><td><b>160</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>eder xx xxxxxx</b></td><td><b>300</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>julia xx xxxxx</b></td><td><b>130</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mara xxx xxxxx</b></td><td><b>200</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>lara xxx xxxxx</b></td><td><b>100</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>beto xxx xxxxx</b></td><td><b>150</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>fabio xxx xxxxx</b></td><td><b>170</b></td><td><b>PMW</b></td>
			</tr>		<tr>
				<td><b>juliano xxx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>marisa xxx xxxxx</b></td><td><b>400</b></td><td><b>CGH</b></td>
			</tr>		<tr>
				<td><b>selena xxx xxxxx</b></td><td><b>160</b></td><td><b>JTC</b></td>
			</tr>
		</tbody>
	</table>
</div>

Using Pure Javascript

function crLink(){
   var tbl = document.querySelectorAll("#frame table[title^='TITULO'] tr td:nth-child(3) b");

   var l1 = " - LINK <a href='http://www.";
   var l2 = "' target='_blank'><b><font color='blue'>";
   var l3 = "</font></b></a>";
   
   var links = {
      BSB: { urls: "df.com.br",           nome: "BRASILIA" },
      CGH: { urls: "saopaulo.com.br",     nome: "CONGONHAS" },
      CNF: { urls: "minasgerais.com.br",  nome: "CONFINS" },
      JTC: { urls: "saopaulo.com.br",     nome: "BAURU" },
      PMW: { urls: "tocantins.com.br",    nome: "PALMAS" },
      SDU: { urls: "riodejaneiro.com.br", nome: "RIO DE JANEIRO" },
      SSA: { urls: "bahia.com.br",        nome: "SALVADOR" }
   }
   
   for(var i of tbl){
      i.innerHTML = l1
      +links[i.textContent].urls
      +l2
      +links[i.textContent].nome
      +l3;
   }
   
}

<button onclick="crLink()">BOTAO</button>
<div id="frame">
	<table title="TITULO">
		<tbody>
						<tr>
				<td><b>joao xx xxxxx</b></td><td><b>150</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>maria xx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>ana xx xxxxx</b></td><td><b>190</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mario xx xxxxxxx</b></td><td><b>100</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>claudia xxxxxxx</b></td><td><b>170</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>ricardo xx xxxxxx</b></td><td><b>160</b></td><td><b>SDU</b></td>
			</tr>		<tr>
				<td><b>eder xx xxxxxx</b></td><td><b>300</b></td><td><b>CNF</b></td>
			</tr>		<tr>
				<td><b>julia xx xxxxx</b></td><td><b>130</b></td><td><b>SSA</b></td>
			</tr>		<tr>
				<td><b>mara xxx xxxxx</b></td><td><b>200</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>lara xxx xxxxx</b></td><td><b>100</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>beto xxx xxxxx</b></td><td><b>150</b></td><td><b>JTC</b></td>
			</tr>		<tr>
				<td><b>fabio xxx xxxxx</b></td><td><b>170</b></td><td><b>PMW</b></td>
			</tr>		<tr>
				<td><b>juliano xxx xxxxx</b></td><td><b>110</b></td><td><b>BSB</b></td>
			</tr>		<tr>
				<td><b>marisa xxx xxxxx</b></td><td><b>400</b></td><td><b>CGH</b></td>
			</tr>		<tr>
				<td><b>selena xxx xxxxx</b></td><td><b>160</b></td><td><b>JTC</b></td>
			</tr>
		</tbody>
	</table>
</div>