JS implements the method of controlling the table to display only the row border or only the column border

2020-05-19 04:17:02
OfStack

This example demonstrates how JS can control a table to display only row or column borders. Share with you for your reference. The specific analysis is as follows:

With the JS code below you can control the table to display only the lines between rows, or only the lines between columns, using the rules properties of the table object


<!DOCTYPE html>
<html>
<head>
<script>
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>

I hope this article has been helpful to your javascript programming.