<html>
<head>
<title>JS Table</title>
<style>
div{
background:#CC3;
border:#663 5px solid;
}
th{
background:#663;
color:#FFC;
}
button{
background:#663;
color:#FFC;
}
input{
background:#663;
color:#FFC;
}
td{
text-align:center;
}
</style>
</head>
<body>
<div>
<p></p>
Enter Subject:<input id="subject" type="text" name="one"> Enter Marks:<input id="marks" type="number" name="two">
<button id="add" onClick="addrow()">Add</button><br>
<p></p>
<table border="1px solid" style="width:60%" id="t1">
<tr>
<th>S.NO</th>
<th>Subject</th>
<th>Total</th>
<th>Obtain</th>
<th>Percentage (%)</th>
</tr>
</table>
<script>
function addrow() {
var table = document.getElementById("t1");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
cell0.innerHTML = (rowCount + 1) - 1;
cell1.innerHTML = document.getElementById('subject').value;
cell2.innerHTML = 100;
cell3.innerHTML = document.getElementById('marks').value;
cell4.innerHTML = document.getElementById('marks').value + "%";
}
</script>
</div>
</body>
</html>
OUTPUT:
No comments:
Post a Comment