在Javascript中更改表格的边框？

我想要做的是通过JS函数改变表格（#mytable）的边框取决于用户输入的值（例如：用户输入3 => border =“3”）在Javascript中更改表格的边框？

I现在用下面的代码，在被称为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; 
    } 
}

外部文件存在然后，在我写的HTML：

<!DOCTYPE html> 

<html> 
    <head> 
     <title> select a border size </title> 
     <script type = "text/javascript" src = "size.js" > </script> 
     <script> 
      number = window.prompt("Please select a size for 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 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>

的问题是什么在加载页面的变化，什么不对我的代码。谢谢:)

来源

2014-10-04 Riad

F12和调试是你的朋友。 – jeff 2014-10-04 00:36:53

是的我知道，我使用Firebug似乎一切都很好，除了改变CSS，因为我想要的。 – Riad 2014-10-04 00:41:24

只是一个微小的变化，但大的影响：代替

document.getElementById("mytable").style.border = "3"; 使用

document.getElementById("mytable").border= 3;

所以你的函数变成这样：

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; 
    } 
}

和你'很好走

来源

2014-10-04 00:47:20

使用'borderWidth'属性不是更简单吗？ – Barmar 2014-10-04 00:48:59

我曾尝试过，但它只设置不在每个原始列和列的外部边框 – Riad 2014-10-04 00:50:07

如果您想在html中使用border =“3”来设置表格的边框，并且它将边框应用于每个原始和列，这就是为什么我正在使用 document.getElementById（“mytable”）。style.border =“3” – Riad 2014-10-04 00:52:06

在Javascript中更改表格的边框？

回答

相关问题