表格内外边框属性测试

最新推荐文章于 2024-05-24 08:56:19 发布

菜鸟下山

最新推荐文章于 2024-05-24 08:56:19 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/huzijia888/article/details/78657661

版权

<!doctype html>
<html>
<head>

<style>
</style>
<script>
var bord=new Array("void","above","below","hsides","vsides","lhs","rhs","box","border");//新建表格外边框frame数组
var k=0;
var bord1=new Array("none","groups","rows","cols","all");//新建表格内边框rules属性数组
var c=0;
function te(){
var tab=document.getElementById("table1");
k=k+1;
alert(k);
if(k==bord.length){
k=0;
}
tab.setAttribute("frame",bord[k]);//更改frame属性
}
function te2(){
var tab=document.getElementById("table1");
c=c+1;
alert(c);
if(c==bord1.length){
c=0;
}
tab.setAttribute("rules",bord1[c]);//更改rules属性
}
</script>
<meta charset="UTF-8">
</head>
<body>
<table id="table1" cellspacing="1" cellpadding="1">
<tr>
<th>姓名</th><th>年龄</th><th>性别</th>
</tr>
<tr>
<td>奥巴马</td><td>50</td><td>男</td>
</tr>
<tr>
<td>川普</td><td>60</td><td>男</td>
</tr>
<tr>
<td>三胖</td><td>30</td><td>男</td>
</tr>
</table>
<input type="button" οnclick="te()" value="测试外边框"><input type="button" value="测试内边框" οnclick="te2()">
</body>
</html>