HTML DOM rules 属性
JavaScript基础 2022-06-08 17:13:44小码哥的IT人生shichen
HTML DOM rules 属性
定义和用法
rules 属性可设置或返回表格的内部边线。
语法
tableObject.rules=none|groups|rows|cols|all实例
下面的例子设置了表格的两种不同的内部边线：
<html>
<head>
<script type="text/javascript">
function rowRules()
{
document.getElementById('myTable').rules="rows"
}
function colRules()
{
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="rowRules()"
value="Show only row borders">
<input type="button" onclick="colRules()"
value="Show only col borders">
</body>
</html>TIY
完整实例【规定表格的内部边线】：
<html>
<head>
<script type="text/javascript">
function rowRules()
{
document.getElementById('myTable').rules="rows"
}
function colRules()
{
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="rowRules()" value="仅显示行边框">
<input type="button" onclick="colRules()" value="仅显示列边框">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
