在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中更改表格的邊框？

回答

相關問題