javascript - How to Hide multiple dynamic Columns in JS -
here have set 1 button, toggle button. if click button part of fields should hide. if hit again, hidden field should show. scenario.
here html code:
<!-- toggle button code here --> <td align="center"> <input type="button" id="viewbutton" style="width:80px;" class="button" onclick = "hide()" value="view more"/> </td> <!-- headers of table hide while hit above button--> <tr> <th width='120' scope='col' id='remarks'><div align="left">remarks</div></th> <th width='66' scope='col' id='lan' ><div align="left">lan mac address</div></th> <th width='70' scope='col' id='wifi' ><div align="left">wifi mac address</div></th> <th width='65' scope='col' id='scrapped' ><div align="center">scrapped date</div></th> </tr> <?php populatesystemasset_bylocation($location_posted,$asset_type_posted,$employees_posted,"list") ?> dynamic fields are:
function populatesystemasset_bylocation($locations,$asset_types,$employees,$check) { while($fetchedquery = mysql_fetch_array($selectquery)) //retrieve field database , assigned variable (assume) echo "<tr>"; echo "<td align='left'>$asset_type</td> <td align='left'>$asset_description</td>"; echo "<td align='left' id='remarks_ans'>$remarks</td>"; if($lan_addr == '' || $lan_addr == 'null' ) { echo "<td align='center' id='lan_ans'></td>"; } else { echo "<td align='center' id='lan_ans'>$lan_addr</td>"; //formatted date } if($wifi_addr == '' || $wifi_addr == 'null' ) { echo "<td align='center' id='wifi_ans'></td>"; } else { echo "<td align='center' id='wifi_ans'>$wifi_addr</td>"; //formatted date } if($asset_scrapped_date == '' || $asset_scrapped_date == '0000-00-00') { echo "<td align='center' id='scrapped_ans'></td>"; } else { echo "<td align='center' id='scrapped_ans'>$scrappeddateformatted</td>"; //formatted date } echo "</tr>"; }//while }//function my javascript code :
//initially hide fiels while page loads <script type="application/javascript"> var flag = 0; function hide() { if(flag == 0) { document.getelementbyid("viewbutton").value = "view less"; document.getelementbyid("remarks").style.display = "table-cell"; document.getelementbyid("lan").style.display = "table-cell"; document.getelementbyid("wifi").style.display = "table-cell"; document.getelementbyid("scrapped").style.display = "table-cell"; document.getelementbyid("remarks_ans").style.display = "table-cell"; document.getelementbyid("lan_ans").style.display = "table-cell"; document.getelementbyid("wifi_ans").style.display = "table-cell"; document.getelementbyid("scrapped_ans").style.display = "table-cell"; flag = 1; } else { document.getelementbyid("viewbutton").value = "view more"; document.getelementbyid("remarks").style.display = "none"; document.getelementbyid("lan").style.display = "none"; document.getelementbyid("wifi").style.display = "none"; document.getelementbyid("scrapped").style.display = "none"; document.getelementbyid("remarks_ans").style.display = "none"; document.getelementbyid("lan_ans").style.display = "none"; document.getelementbyid("wifi_ans").style.display = "none"; document.getelementbyid("scrapped_ans").style.display = "none"; flag = 0; } } </script> my problem: problem hide headers , first row fields. remaining rows not hide. don't know why second , future row's columns not hide.
please me solve problem.
change code this
your php code
function populatesystemasset_bylocation($locations,$asset_types,$employees,$check) { echo "<tr class='toggleclass'>"; // code td echo "</tr>"; }//function now change js function this
<script type="application/javascript"> var flag = 0; function hide() { if(flag == 0) { document.getelementbyid("viewbutton").value = "view less"; document.getelementsbyclassname("toggleclass").style.display = "table-cell"; flag = 1; } else { document.getelementbyid("viewbutton").value = "view more"; document.getelementsbyclassname("toggleclass").style.display = "none"; flag = 0; } } </script> 
Comments
Post a Comment