How To Hide Multiple Row With Unix ID
Hai sobat, dari kemarin saya mendapat problem hide multiple row pada sebuah table. Yang Menjadi problem adalah karena setiap row memiliki ID yang unik. sehingga tidak bisa menggunakan "$("id").style.display="none"". Untuk itu saya membuat sebuah tipe yaitu "proj_no", sehingga walaupun setiap row memiliki id yang unik dan berbeda namun masih memiliki tipe yang menjadi identitas yang sama
berikut scrip untuk row nya
<input type="text" style='display: none;" size="15" id="proj_no_"+num_id+"" class="proj_no" tipe="proj_no" value="" maxlength="255" readonly>
Row diatas memiliki ID yang unik dimana terdapat +num_id+ dimana num_id tersebut akan selalu Count untuk setiap row sehingga id akan berbeda. untuk menghide row diatas tentunya membutuhkan suatu tahapan, ataukah onClick atau onChange, disini saya menggunakan onChange karena alurnya adalah apabila saya memilih A maka akan hide dan apabila saya memilih B maka akan show. Dan disini saya menggunakan Option Button berikut
<select name="projs_id" size="1" id="projs_id" onchange="z_changeJenisClaimTrans();">
<option value="1">A</option>
<option value="2">B</option>
</select>
setelah itu kita tuliskan java scrip ini yang berfungsi sebagai fungsi yang dinamakan z_changeJenisClaimTrans
<script type="text/javascript">
function z_changeJenisClaimTrans(){
document.getElementById('addButton').disabled = false;
var proj_no = $$("input[tipe=proj_no]");
if($('projs_id').value=='1'){
proj_no.each(function(projno){
projno.style.display="none";
}
);
}else{
proj_no.each(function(projno){
projno.style.display="block";
});
}
}
</script>
jadi alurnya adalah saat saya mengganti pilihan dari A ke B dalam option button maka otomatis akan memanggil fungsi z_changeJenisClaimTrans.
Apabila kawan mempunyai multiple row namun memiliki ID yang sama maka kawan bisa mencoba cara berikut, yang saya copas dari forum http://www.tek-tips.com.
<html>
<script language=JavaScript>
function hideRow(obj) {
if (document.getElementById(obj).style.display == "block")
{document.getElementById(obj).style.display = "none";}
else
{document.getElementById(obj).style.display = "block";}
}
</script>
<body>
<div align="center">
<p><a href="#" onclick="hideRow('row1')">Hide/Show row1</a>
<a href="#" onclick="hideRow('row2')">Hide/Show row2</a>
<a href="#" onclick="hideRow('row3')">Hide/Show row3</a>
<a href="#" onclick="hideRow('row4')">Hide/Show row4</a> </p>
<p><a href="#">Hide row1/Show row 2</a> <br>
</p>
</div>
<table border=1px align="center">
<tr id=row1 style="display:block">
<td>this is</td>
<td>row 1</td>
</tr>
<tr id=row2 style="display:none">
<td>this is</td>
<td>row 2</td>
</tr>
<tr id=row3 style="display:none">
<td>this is</td>
<td>row 3</td>
</tr>
<tr id=row4 style="display:none">
<td>this is</td>
<td>row 4</td>
</tr>
</table>
<p align="center">This is test text to see what happens </p>
</body>
</html>
Demikian yang bisa saya share semoga bermanfaat :)
Belajar PHP dalam 17 Jam ? Bisa !! Click Here!
0 komentar:
Posting Komentar