JavaScript controls the non-display of a column in a table. javascript controls the table

JavaScript controls the non-display of a column in a table. javascript controls the table

This example describes how to use JavaScript to control the non-display of a column in a table. Share it with you for your reference. The specific implementation method is as follows:

1. table Code
Copy codeThe Code is as follows: <table id = "mytable" border = "0" width = "1400" align = "center"
Cellpadding = "3" cellspacing = "1" bgcolor = "# dfdfdf">
<Tbody id = "tbody1" style = "background: # e4e9f0; font-weight: bold;">
<Tr class = "gray12">
<Td width = "120" bgcolor = "# FFFFFF"> date </td>
<Td width = "120" bgcolor = "# FFFFFF"> media name </td>
<Td width = "200" bgcolor = "# FFFFFF"> serving form </td>
<Td width = "120" bgcolor = "# FFFFFF"> Number of exposures </td>
<Td width = "120" bgcolor = "# FFFFFF"> Number of people exposed </td>
<Td width = "120" bgcolor = "# FFFFFF"> Number of clicks </td>
<Td width = "120" bgcolor = "# FFFFFF"> Number of clicks </td>
<Td width = "120" bgcolor = "# FFFFFF"> CTR </td>
<Td width = "120" bgcolor = "# FFFFFF"> visits </td>
<Td width = "120" bgcolor = "# FFFFFF"> bounce Times </td>
<Td width = "120" bgcolor = "# FFFFFF"> access depth </td>
<Td width = "120" bgcolor = "# FFFFFF"> browsing duration/second </td>
<Td width = "120" bgcolor = "# FFFFFF"> participants </td>
<Td width = "120" bgcolor = "# FFFFFF"> Number of people handling services </td>
</Tr>
</Tbody>
<Tbody id = "detail_id"> </tbody>
</Table>

2. js permission Control

Note: if the data is dynamic data, control the display of td after the assignment is complete. Otherwise, the td header is successfully controlled and other rows fail.

if (uname === "guest") { $("#mytable tr").each(function() {   $(this).find("td").eq(7).css("display", "none");   $(this).find("td").eq(8).css("display", "none");   $(this).find("td").eq(9).css("display", "none");   $(this).find("td").eq(10).css("display", "none");   $(this).find("td").eq(11).css("display", "none");   $(this).find("td").eq(12).css("display", "none");   $(this).find("td").eq(13).css("display", "none"); });}

I hope this article will help you design javascript programs.