使用javascript开关更改html的表边框

Changing a table border of html using javascript switch?

本文关键字：边框 html javascript 开关 使用      更新时间：2023-09-26

这是我迄今为止的代码。不知道该使用什么语法来更改小表中的边框。我知道我的代码不起作用。我只需要一些关于获取bordernumber变量以更改表边框的帮助。

<html>
<head>
<script type="text/javascript">
var choice;
var validInput=true;
var bordernumber;
choice=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)'n");
switch(choice){
case "3":
bordernumber= "3";
break;
case "5":
bordernumber="5";
break;
case "7":
bordernumber="7";
break;
case "9":
bordernumber="9";
break;
default:
validInput=false;
break;
}
if (validInput===true){
document.getElementsById.border='bordernumber';
}
else
document.write("error");
</script>
<table border="7">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>`

要调用getElementById()（它是单数），需要在table上有一个id。然后使用bordernumber的值，而不是字符串"bordernumber":

var choice;
var validInput=true;
var bordernumber;
choice=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)'n");
switch(choice){
  case "3":
  case "5":
  case "7":
  case "9":
    bordernumber = choice;
    break;
    
  default:
    validInput=false;
    break;
}
if (validInput===true){
  document.getElementById('mytable').border=bordernumber;
}
else
  document.write("error");
<table border="7" id="mytable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>

试试这个。您需要为此在表中添加一个id：

<html>
<head>
<script type="text/javascript">
var choice;
var validInput=true;
var bordernumber;
choice=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)'n");
switch(choice){
case "3":
bordernumber= "3";
break;
case "5":
bordernumber="5";
break;
case "7":
bordernumber="7";
break;
case "9":
bordernumber="9";
break;
default:
validInput=false;
break;
}
if (validInput===true){
document.getElementById("myTable").style.border = bordernumber;
}
else
document.write("error");
</script>
<table id="myTable" border="7">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>

您的代码完全是新手的烂摊子。这是我能为你做的最好的事情：

<!DOCTYPE html>
<html>
<head>
<body>
    <table id="myTable" border="7">
        <tr>
            <td>100</td>
            <td>200</td>
        </tr>
        <tr>
            <td>300</td>
            <td>400</td>
        </tr>
    </table>
<script type="text/javascript">
var choice=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)'n");
if(isNaN(choice) || choice % 2 == 0 || choice < 3 || choice > 9){
    document.write("error");
}
else{
    document.getElementById("myTable").style.borderWidth = choice + "px";
}
</script>
</body>
</html>

演示：http://jsfiddle.net/4nsyu63w/

有两种方法可以做到这一点。一种方法是向表中添加一个id并使用document.getElementById(id).style.property=new style

另一种方法是使用document.getElementsByTagName(tagName).style.property=new style

方法一

document.getElementById("tableId").style.borderWidth = choice

方法二

document.getElementsByTagName("table").style.borderWidth = choice
相关文章：