JavaScript设置table表格边框
分类:实例代码
本章节介绍一下如何动态设置table表格的边框效果,下面先看一个相对来说比较粗糙的方式。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script> function changeBorder(){ var td=document.getElementById('myTable'); td.border="10"; } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ changeBorder() } } </script> </head> <body> <table border="1" id="myTable"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <br> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现了设置效果,当然我们也可以使用css方式设置表格的边框下效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script> function changeBorder(){ var td=document.getElementById('myTable'); td.style.borderColor="red"; td.style.borderStyle="solid"; td.style.borderWidth="2px"; } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ changeBorder() } } </script> </head> <body> <table border="1" id="myTable"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <br> <input type="button" id="bt" value="查看效果"/> </body> </html>
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu