在Javascript中更改表的边框

Change The Border For a Table in Javascript?

本文关键字：边框 Javascript 更新时间：2023-09-26

我想做的是通过J.S函数更改表（#mytable）的边界，这取决于用户输入的值（例如：用户输入的3=>border="3"）

我正在使用以下代码，该代码存在于一个名为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>

问题是加载页面时没有任何更改，我的代码有问题。感谢：）

只是一个小变化，但影响很大：而不是

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

你很适合去