<html>
<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Styles.css" />
<script language="javascript" type="text/javascript">
function fnDeleteRows() {
for (var i = document.getElementById("tblProducts").rows.length; i > 1; i--) {
document.getElementById("tblProducts").deleteRow(i - 1);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="javascript:fnDeleteRows();">Delete All</a>
<table id="tblProducts" runat="server" class="tableClass">
<tr>
<th>Product ID</th><th>Product Number</th>
<th>Product Name</th><th>Price</th>
</tr>
<tr>
<td>100</td><td>Adjustable Race</td>
<td>AR-5381</td><td>50</td>
</tr>
<tr>
<td>101</td><td>Bearing Ball</td>
<td>BA-8327</td><td>150</td>
</tr>
<tr>
<td>102</td><td>Headset Ball Bearings</td>
<td>BE-2349</td><td>250</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Clicking on DeleteAll link will clear all rows from table.
The post How to Delete Rows from Table using Javascript appeared first on Everything Technical.