Javascript refactoring - how to?

Question

I have got table like this:

<table>
  <tr>
    <th>Name</th><td>Steve Martin</td>
  </tr>
  <tr>
    <th>Phone</th><td>XXX</td>
  </tr>
   <tr>
    <th>Bank account</th><td>654861/46147</td>
  </tr>
</table>

Im using JavaScript for same parts of my table. For example

$('th:contains(Name)').each(function(index) {
   var $this = $(this),
       dluh = $this.next(),
       dluhText = dluh.text(),
       dluhLink = $("<a />", {
         target: "_blank",
         href: 'www.google.com' + dluhText,
         text: dluhText,
         style: "text-decoration: none"
       });

   dluh.html('').append(dluhLink);
  });

Creates link from th elements. But on the other parts on my table I need to make link from td elements. For example:

$('th:contains(Phone)').each(function(index) {
   var $this = $(this),
       dluh = $this.next(),
       dluhText = dluh.text(),
       dluhLink = $("<a />", {
         target: "_blank",
         href: 'www.google.com' + dluhText,
         text: dluhText,
         style: "text-decoration: none"
       });

   dluh.html('').append(dluhLink);
  });

But most parts of code is the same. I think that I save same lines of code, but how to? Can you help me?

On CODEPEN I have got more code.

James Craig · Accepted Answer · 2016-06-13 13:02:07Z

3

You can save a lot of repetition with a function like this.

function addLink(selector) {
  $(selector).each(function(index) {
   var $this = $(this),
       dluh = $this.next(),
       dluhText = dluh.text(),
       dluhLink = $("<a />", {
         target: "_blank",
         href: 'www.google.com' + dluhText,
         text: dluhText,
         style: "text-decoration: none"
       });

   dluh.html('').append(dluhLink);
  });
}

Then call the function like this.

addLink('th:contains(Name)');
addLink('th:contains(Phone)');
addLink('th:contains(Bank account)');

JSFiddle

answered Jun 13, 2016 at 13:02

James Craig

6,90210 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript refactoring - how to?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related