Witam. Jestem bardzo początkujący. Pracuje nad stworzeniem na stronie prostego filtrowania zawartości tabeli. Na podstawie informacji i skryptów, które znalazłem w internecie stworzyłem taki projekt:
Projekt - 1
Niestety filtry działają tylko pojednyńczo tzn. wybranie kryteriów w filtrze nr dwa czyści wybrane pozycje w innych filtrach. Nie wiem jak sobie z tym poradzić. Nie wiem jak to dokładnie opisać ale jak sprawić aby filtry działały razem i wybierały tylko wspólne dla siebie nawzajem elementy?
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  5. 	<title>LISTA</title>
  6. 	<link rel="stylesheet" href="style.css" type="text/css" />
  7. 	<script type="text/javascript" src="filtr.js"></script>
  8. </head>
  9. <body>  
  10. 			<table border="1" id="sortable">
  11. 				<thead>
  12. 					<tr id="tabh">
  13. 						<th width="127" onClick="SortTable(1)">Typ <p style="display: inline;" id="sort1"></p></th>
  14. 						<th width="86" onClick="SortTable(2)">Materiał <p style="display: inline;" id="sort2"></p></th>
  15. 						<th width="99" onClick="SortTable(3)">Wymiar (mm) <p style="display: inline;" id="sort3"></p></th>
  16. 						<th width="116" onClick="SortTable(4)">Grubość (mm) <p style="display: inline;" id="sort4"></p></th>
  17. 					</tr>
  18. 					<tr id="tabh_filtr">
  19. 						<th>
  20.  
  21. 					    </th>
  22. 						<th>
  23. 							<div id="filtr_wymiar">
  24. 								<p class="newclass"><input type="checkbox" onChange="filtr_start1()" id="METAL" value="Metal"/> Metal</p>
  25.                                 <p class="newclass"><input type="checkbox" onChange="filtr_start1()" id="PLASTIK" value="Plastik"/> Plastik</p>
  26.                                 <p class="newclass"><input type="checkbox" onChange="filtr_start1()" id="SZKLO" value="Szkło"/> Szkło</p>
  27. 							</div>
  28. 						</th>
  29. 						<th align="left">
  30. 							<div id="filtr_wymiar">
  31. 								<p class="newclass"><input type="checkbox" onChange="filtr_start2()" id="WYMIAR8x8" value="8x8"/> 8x8</p>
  32.                                 <p><input type="checkbox" onChange="filtr_start2()" id="WYMIAR10x10" value="10x10"> 10x10</p>
  33.                                 <p><input type="checkbox" onChange="filtr_start2()" id="WYMIAR19x19" value="19x19"> 19x19</p>
  34.                                 <p><input type="checkbox" onChange="filtr_start2()" id="WYMIAR25x25" value="25x25"> 25x25</p>
  35.  
  36. 							</div>
  37. 						</th>
  38. 						<th align="left">
  39. 							<div id="filtr_grubosc">
  40. 								<p class="newclass"><input type="checkbox" onChange="filtr_start3()" id="GRUBOSC_105" value="1,05"/> 1,05</p>
  41. 								<p><input type="checkbox" onChange="filtr_start3()" id="GRUBOSC_150" value="1,50"> 1,50</p>
  42. 								<p><input  type="checkbox" onChange="filtr_start3()" id="GRUBOSC_190" value="1,90"> 1,90</p>
  43.  
  44. 							</div>
  45. 						</th>
  46. 			    </thead>
  47. <tbody>
  48. 					<tr id="">
  49. 						<td>G1</td>
  50. 						<td>Metal</td>
  51. 						<td>8x8</td>
  52. 						<td>1,05</td>
  53. 					</tr>
  54. 					<tr id="tabb1">
  55. 						<td>G2</td>
  56. 						<td>Plastik</td>
  57. 						<td>8x8</td>
  58. 						<td>1,50</td>
  59. 					</tr>
  60.  
  61. 					<tr id="tabb1">
  62. 						<td>G3</td>
  63. 						<td>Szkło</td>
  64. 						<td>10x10</td>
  65. 						<td>1,90</td>
  66. 					</tr>
  67. 					<tr id="tabb1">
  68. 						<td>G4</td>
  69. 						<td>Metal</td>
  70. 						<td>19x19</td>
  71. 						<td>1,05</td>
  72. 					</tr>
  73. 					<tr id="tabb1">
  74. 						<td>G5</td>
  75. 						<td>Szkło</td>
  76. 						<td>10x10</td>
  77. 						<td>1,50</td>
  78. 					</tr>
  79. 					<tr id="tabb1">
  80. 						<td>G6</td>
  81. 						<td>Szkło</td>
  82. 						<td>25x25</td>
  83. 						<td>1,50</td>
  84. 					</tr>
  85. 					<tr id="tabb1">
  86. 						<td>G7</td>
  87. 						<td>Plastik</td>
  88. 						<td>19x19</td>
  89. 						<td>1,90</td>
  90. 					</tr>
  91. 					<tr id="tabb1">
  92. 						<td>G8</td>
  93. 						<td>Metal</td>
  94. 						<td>25x25</td>
  95. 						<td>1,05</td>
  96. 					</tr>
  97. 				</tbody>
  98. 			</table>
  99. </body>
  100. </html>
[HTML] pobierz, plaintext


Kod
function filtr_start1()
{
        var METAL = document.getElementById("METAL");
        var PLASTIK = document.getElementById("PLASTIK");
        var SZKLO = document.getElementById("SZKLO");



        table = document.getElementById("sortable").rows;
        var table_length = table.length;

        if(METAL.checked || PLASTIK.checked || SZKLO.checked)
        {
                for(var i = 2; i < table_length; i++)
                {
                        if((table[i].cells[1].innerHTML == METAL.value && METAL.checked) ||
                                (table[i].cells[1].innerHTML == PLASTIK.value && PLASTIK.checked) ||
                                (table[i].cells[1].innerHTML == SZKLO.value && SZKLO.checked) )
                        {
                                table[i].style.display = "";
                        }
                        else
                        {
                                table[i].style.display = "none";
                        }
                }
        }
        else
        {
                for(var i = 2; i < table_length; i++)
                {
                        table[i].style.display = "";
                }
        }
}






function filtr_start2()
{
        var WYMIAR8x8 = document.getElementById("WYMIAR8x8");
        var WYMIAR10x10 = document.getElementById("WYMIAR10x10");
        var WYMIAR19x19 = document.getElementById("WYMIAR19x19");
        var WYMIAR25x25 = document.getElementById("WYMIAR25x25");



        table = document.getElementById("sortable").rows;
        var table_length = table.length;

        if(WYMIAR8x8.checked || WYMIAR10x10.checked || WYMIAR19x19.checked || WYMIAR25x25.checked)
        {
                for(var i = 2; i < table_length; i++)
                {
                        if((table[i].cells[2].innerHTML == WYMIAR8x8.value && WYMIAR8x8.checked) ||
                                (table[i].cells[2].innerHTML == WYMIAR10x10.value && WYMIAR10x10.checked) ||
                                (table[i].cells[2].innerHTML == WYMIAR19x19.value && WYMIAR19x19.checked) ||
                                (table[i].cells[2].innerHTML == WYMIAR25x25.value && WYMIAR25x25.checked) )
                        {
                                table[i].style.display = "";
                        }
                        else
                        {
                                table[i].style.display = "none";
                        }
                }
        }
        else
        {
                for(var i = 2; i < table_length; i++)
                {
                        table[i].style.display = "";
                }
        }
}


function filtr_start3()
{
        var GRUBOSC_105 = document.getElementById("GRUBOSC_105");
        var GRUBOSC_150 = document.getElementById("GRUBOSC_150");
        var GRUBOSC_190 = document.getElementById("GRUBOSC_190");


        table = document.getElementById("sortable").rows;
        var table_length = table.length;

        if(GRUBOSC_105.checked || GRUBOSC_150.checked || GRUBOSC_190.checked)
        {
                for(var i = 2; i < table_length; i++)
                {
                        if((table[i].cells[3].innerHTML == GRUBOSC_105.value && GRUBOSC_105.checked) ||
                                (table[i].cells[3].innerHTML == GRUBOSC_150.value && GRUBOSC_150.checked) ||
                                (table[i].cells[3].innerHTML == GRUBOSC_190.value && GRUBOSC_190.checked) )
                        {
                                table[i].style.display = "";
                        }
                        else
                        {
                                table[i].style.display = "none";
                        }
                }
        }
        else
        {
                for(var i = 2; i < table_length; i++)
                {
                        table[i].style.display = "";
                }
        }
}