document.getElementsByClassName is not affecting elements

Question

I have the following script:

$i=1;
echo '<table>';
while($row=mysql_fetch_array){
  echo '<tr class="'.$i.'">';
  echo '<td>'.$row['value'].'</td>';
  echo '</tr>';
  $i++;
}
echo '</table>';

$i=1;
echo '<table>';
while($row=mysql_fetch_array){
  echo '<tr class="'.$i.'">';
  echo '<td>'.$row['value'].'</td>';
  echo '</tr>';
  $i++;
}
echo '</table>';
echo '<script>nr='.mysql_num_rows(query).'</script>';

Javascript:

$(document).ready(function(){ 
    for(i=26; i<=nr; i++){
        document.getElementsByClassName(i).style.display='none';    
    }
});

As you probably figured out,i'm trying to create a pagination script.To start with, no, i don't want an already made js pagination script , i want it to create it alone(well with some help in cases when i am blocked on some issues).The first step is to hide the other's elements starting with the 25 tr.But the problem is that the document.getelementsbyclassname dont affect them...At first i used id for tr,and it worked,but only for the first table(because id must be unique,and in my case the value for the id is the same,so i used class).I can't figure out what is the problem...

It's `getElementsByClassName` not `getElementByClassName`! missing **s**! — Dhaval Marthak, Feb 06 '15 at 08:52
class name cannot starts with number http://stackoverflow.com/questions/4089006/can-xhtml-and-html-class-attributes-value-start-with-a-number — szapio, Feb 06 '15 at 08:52
@DhavalMarthak , sorry i miss spelled it in my question.In my code is as it should be — Petru Lebada, Feb 06 '15 at 08:54
Did you even try to search for this? [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByClassName) can clarify all that you've wrong in your code. — Teemu, Feb 06 '15 at 08:57
@Teemu , well yes i 've read something,but still couldn't found the problem — Petru Lebada, Feb 06 '15 at 09:00
Umh... `gEBCN()` returns a live [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) ... — Teemu, Feb 06 '15 at 09:02
@PetruLebada can you provide console.log(nr) before your loop? — szapio, Feb 06 '15 at 09:07
@davidkonrad , maybe for js it works but this is not a proper way, because css won`t work, a good practice is to not use names starting with digits — szapio, Feb 06 '15 at 09:09
@szapio, no (or yes, agree:) - it is not a proper way (against the specs) but either way it works, all browsers support it, so that the classes are numbers / digits is not the problem here. — davidkonrad, Feb 06 '15 at 09:12
@szapio : Uncaught TypeError: Cannot set property 'display' of undefined .. but i don't understand...i've initiated it — Petru Lebada, Feb 06 '15 at 09:17
@PetruLebada Why wouldn't you take a time, and really read the docs I've linked in my comments above? — Teemu, Feb 06 '15 at 09:32
@Teemu , i took a quick look at them,but i don't think i will find the answer there... — Petru Lebada, Feb 06 '15 at 09:36
@Teemu, what you tried to say is that the document.getelementsbyclassname returns a collection(array) ,so i have storage it in a variable and create a loop so the style will affect each class element? — Petru Lebada, Feb 06 '15 at 10:25
Yes, exactly, though it's not an array, it's an array-like object. It has indicies starting from `0` to its length-1. If you're starting the loop at some random value, like `26`, and end the loop to another random value (`nr`), you have to make sure, that the collection really has those indices. — Teemu, Feb 06 '15 at 11:34

Sougata Bose · Answer 1 · 2015-02-06T09:18:57.640

0

No need for class with $i.Try with -

echo '<tr class="row-class">';

And the jquery -

$(document).ready(function(){ 
    $('.row-class').each(function() {
        $(this).hide();
    })
});

Add conditions if you need.

Or No need to add class to rows. If the page contains a single table then -

$(document).ready(function(){ 
    $('table tr').each(function() {
        $(this).hide();
    })
});

edited Feb 06 '15 at 09:18

answered Feb 06 '15 at 09:01

Sougata Bose

31,517
8
49
87

1

the op said very clear what's his problem and what he try to acomplish.Changing his code like this won't help him. – Memphistoles Feb 06 '15 at 09:03
1

"said very clear [..] what he try to acomplish" - yes, `As you probably figured out,i'm trying to create a pagination script` - why should there be no pointer to the conceptually better approach? Having classes on the elements from 0...n, what's the point? Could iterate through the child-elements without any classes. And no-one should mention that? CSS and javascript have better built-in functions ..._and_ concepts; no-one should mention that? Doesn't make sense to me. see http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem – VolkerK Feb 06 '15 at 09:10
@VolkerK You are right. This could be done without any class. – Sougata Bose Feb 06 '15 at 09:19
....but probably shouldn't ;-) I meant my comment as a reply to Memphistoles' comment and to the downvote. – VolkerK Feb 06 '15 at 09:24

score -2 · Answer 2 · edited May 23 '17 at 12:04

-2

class name cannot starts with digit

Can XHTML and HTML class attributes value start with a number?

you can try assign class 'row'+$i

echo '<tr class="row'.$i.'">';
  echo '<td>'.$row['value'].'</td>';
 echo '</tr>';

js:

 for(i=26; i<=nr; i++){
        document.getElementsByClassName('row'+i).style.display='none';    
    }

edited May 23 '17 at 12:04

Community

1
1

answered Feb 06 '15 at 08:54

szapio

998
1
9
15

and if i badly need to use digit..is there another way to catch an html element than by class and id ?? so i can use digits? – Petru Lebada Feb 06 '15 at 08:56
@PetruLebada as i posted you can add prefix, and that solves the problem or you can use unicode, read thread that i linked there are answers for your question – szapio Feb 06 '15 at 08:58

document.getElementsByClassName is not affecting elements

2 Answers2