Table 的 rules规则

最新推荐文章于 2023-06-01 13:42:08 发布

最新推荐文章于 2023-06-01 13:42:08 发布 · 639 阅读

文章标签：

本文通过一个简单的HTML表格示例介绍了如何使用JavaScript来改变表格的边框样式，包括仅显示行边框、列边框、列组边框、所有边框以及不显示边框等不同效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <script type="text/javascript"> function rowRules() { document.getElementById('myTable').rules = "rows" } function colRules() { document.getElementById('myTable').rules = "cols" } function groups() { document.getElementById('myTable').rules = "groups" } function all() { document.getElementById('myTable').rules = "all" } function none2() { document.getElementById('myTable').rules = "none" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td> Row1 cell1 </td> <td> Row1 cell2 </td> </tr> <tr> <td> Row2 cell1 </td> <td> Row2 cell2 </td> </tr> <tr> <td> Row3 cell1 </td> <td> Row3 cell2 </td> </tr> </table> <br /> <input type="button" onclick="rowRules()" value="Show only row borders" /><br /> <input type="button" onclick="colRules()" value="Show only col borders" /><br /> <input type="button" onclick="groups()" value="Show only col groups" /><br /> <input type="button" onclick="all()" value="Show only col all" /><br /> <input type="button" onclick="none2()" value="Show only col none" /><br /> </body> </html>