Работа со строками таблицы

[lord13]

В таблице есть строки которые имеют одинаковые id.
К примеру оплачен счет или не оплачен.

<tr id="active" class="client"></tr>
<tr id="active" class="client"></tr>
<tr id="active" class="client"></tr>
<tr id="not_active" class="client"></tr>
<tr id="not_active" class="client"></tr>
<tr id="canc" class="client"></tr>
<tr id="canc" class="client"></tr>

<select name="items" onchange="showhideBlocks(value)">
<option value="0"> All
<option value="1">Activ 
<option value="2"> non active
</select>

function showhideBlocks(val){
if(val==0){
document.getElementById('active').style.display='table-row';
document.getElementById('not_active').style.display='table-row'; 
document.getElementById('canc').style.display='table-row'; 
}
else{
document.getElementById('active').style.display='none';
document.getElementById('not_active').style.display='none';
document.getElementById('canc').style.display='none';
document.getElementById('i'+val).style.display='table-row';    
}
}

Нужно скрывать все строки определенного id, но почемуто работает не так как нужно.

[Aetae]

id - уникальный идентификатор.
Почитайте хоть что-нибудь.

[lord13]

с getElementById понятно, спасибо, каким образом можно заменить данный пример на getElementsByName?

[walik]

В место ID используйте классы. Для работы либо найдите кроссбраузерную функцию getElementsByClass, либо сами бегайте по строчками и проверяйте класс:

if (elem.className == 'blablabla') { //...

[lord13]

function findClass('clientareatableactive clientareatableterminated', node) {
	if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
	else {
		var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
		for(i = 0; i < length; i++) {
			key = true;
			for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
			if(key) array.push(list[i]);
		}
		return array;
	}
}

Как мне использовать эту функцию в моем случае, без использования select, заменим его обыкновенными ссылками.

[lord13]

Сделал вот так ----

function non_active() {
   var n = document.getElementById('sort').getElementsByClassName('clientareatableactive')
     for (var i=0; i<n.length; i++)
       n[i].style.display = "none";

 }
 
 function active() {
   var a = document.getElementById('sort').getElementsByClassName('clientareatableterminated')
     for (var i=0; i<a.length; i++)
       a[i].style.display = "none";

 }

только теперь когда уже выбраны non_active() при нажатии (выборе) active() просто скрывает все и не показывает то что нужно.

как указать чтоб всегда выберало со всей таблице, а не только в видимых tr?

[lord13]

Разобрался, появилась новая задача:
Скрыть ВСЮ строку если в ней присутствует какой либо тег с определенным классом:

<tr>
  <td>
    <span class="textred"></span>
  </td>
</tr>
<tr>
  <td>
    <span class="textgreen"></span>
  </td>
</tr>

function pay() {
   var p = document.getElementsByClassName('textred')
     for (var i=0; i<p.length; i++)
       p[i].style.display = "table-row";
   var s = document.getElementsByClassName('textgreen')
     for (var i=0; i<s.length; i++)
       s[i].style.display = "none";
}

 function npay() {
   var p = document.getElementsByClassName('textgreen')
     for (var i=0; i<p.length; i++)
       p[i].style.display = "table-row";
   var s = document.getElementsByClassName('textred')
     for (var i=0; i<s.length; i++)
       s[i].style.display = "none";
}

Где подправить можно?