Variable of Javascript and jQuery

Question

Rather than stumble through it (with my limited understanding), please explain what is happening to (and the use of) the head var in the following 3 lines of code.

<script type="text/javascript">
  var head = $("thead#tHead1").clone().removeAttr("class");
  $(head).find("#hRow2").remove();
  head = $(head).wrap("<thead>").parent().html();

Edit What is the significance of using $(head) on the 2nd line of code, after setting head = on the 1st and then assigning head to another value?

See answers for what I learned.

Yes. It will refer to the cloned head element in the 2nd line. Same for $(head) in 3rd line. — nhahtdh
– nhahtdh, Commented Feb 7, 2013 at 21:38
@nhahtdh Please check edit. The 'usage' question wasn't clear. — David
– David, Commented Feb 7, 2013 at 21:42
That's some bad code. <thead> elements don't belong within other <thead> elements. — zzzzBov
– zzzzBov, Commented Feb 7, 2013 at 21:48

Alex Wayne · Accepted Answer · 2013-02-07 21:46:54Z

2

// Find an element, make a copy of it, and remove it's class
var head = $("thead#tHead1").clone().removeAttr("class");

// Within the cloned element (not on the DOM yet),
// Find an element within and then remove that found element.
$(head).find("#hRow2").remove();

// Wrap the cloned element in another element, giving it a parent.
// Traverse to that parent and return it's html content
head = $(head).wrap("<thead>").parent().html();

Note the $(head) shouldn't be needed here. That can simply be head instead. You don't need to convert the element to a jQuery wrapped object because it should already be one.

Also, this is terrible code. It's a kludgy hack on the DOM to do whatever it is supposed to. INstead you should using a templating engine of some kind to generate fresh DOM fragments as needed based on some input data.

answered Feb 7, 2013 at 21:46

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

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

3 Comments

David Over a year ago

Alex, Would you find the bottom 2 lines of code (edited) as a correct way to write them?

Alex Wayne Over a year ago

That would marginally improve the code, yes. But honestly I think should take a step back and re-evaluate the approach here. But that's an entirely different question.

David Over a year ago

To your 'kludgy hack' suggestion. Accepted. I am trying to compensate for tables in browsers - not handling a page break 'when going to print'. And, without reloading the page. Got a better idea?

Web_Designer · Accepted Answer · 2013-02-07 21:49:38Z

1

I'll walk you through the lines:

An opening <script> tag, which by the way doesn't need a type attribute.
Find the <thead> element with an id of tHead1, duplicate the element including child nodes, and remove the class attribute from the new element, then assign the new element to the head variable.
Remove the element with an id of hRow2 that's inside the element we created earlier.
Wrap the element we created earlier in a thead element, and reassign the head variable to equal the innerHTML of that '' element.

answered Feb 7, 2013 at 21:49

Web_Designer

75.1k93 gold badges210 silver badges268 bronze badges

Comments

David · Accepted Answer · 2013-02-08 14:05:09Z

From the comments and further study, I gathered that this could be better written as:

var head = $("#tHead1").clone().removeAttr("class");   // clean & clone the head  
head.find("#hRow2").remove();                          // remove 2nd row
head = head[0].outerHTML;                              // get 'only' the desired html

To answer my own question, (I'm not sure of the terminology) the last head = is necessary in this case, to not display [object Object]. Instead of an object, it assigns the desired HTML (header rows) to be used a few lines later in the code. console.log(head) revealed this lesson. I'm also not sure why rows 1 and 2 can't be chained, so this is as clean as I can make it.

The higher purpose of this exercise is to break a large table into separate (45 row) tables, before printing, having only 2 of 3 header rows visible on following pages and not contacting the server or reloading the page. My method for this is to add an end-of-page class to the nth row, accomplish the above and then appendTo() the new table & header after that row.

Collectives™ on Stack Overflow

Variable of Javascript and jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related