html - Change The Border For a Table in Javascript? -
what want alter border table (#mytable) j.s function depends on value user enters (ex: user entered 3 => border="3")
i using next code existed in external file called size.js
function chooseborder (size){ switch (size) { case "3": document.getelementbyid("mytable").style.border = "3"; break; case "5": document.getelementbyid("mytable").style.border = "5"; break; case "7": document.getelementbyid("mytable").style.border = "7"; break; case "9": document.getelementbyid("mytable").style.border = "9"; break; default: //make border = 0 document.getelementbyid("mytable").style.border = "0"; break; } } then in html wrote:
<!doctype html> <html> <head> <title> select border size </title> <script type = "text/javascript" src = "size.js" > </script> <script> number = window.prompt("please select size table border\n 3(3 pixel border)\n 5(5 pixel border)\n 7(7 pixel border)\n 9(9 pixel border)"); </script> </head> <body onload="chooseborder(number)"> <table id="mytable"> <thead> <tr> <th colspan = "4">northern new bailiwick of jersey profit</th> </tr> <tr> <th></th> <th>april</th> <th>may</th> <th>june</th> </tr> </thead> <tbody> <tr> <th>montclair</th> <td>100</td> <td>80</td> <td>90</td> </tr> <tr> <th>clifton</th> <td>79</td> <td>80</td> <td>100</td> </tr> <tr> <th>newark</th> <td>100</td> <td>95</td> <td>91</td> </tr> </tbody> </table> </body> </html> the problem nil changes on loading page, wrong in code. :)
just minor alter big impact: instead of
document.getelementbyid("mytable").style.border = "3"; utilize
document.getelementbyid("mytable").border= 3;
so function becomes this:
function chooseborder (size){ switch (size) { case "3": document.getelementbyid("mytable").border= "3"; break; case "5": document.getelementbyid("mytable").border = "5"; break; case "7": document.getelementbyid("mytable").border = "7"; break; case "9": document.getelementbyid("mytable").border = "9"; break; default: //make border = 0 document.getelementbyid("mytable").border = "0"; break; } } and you're go
javascript html css
No comments:
Post a Comment