<html>
<head>
<title>Input form</title>
</head>
<body>
<center>
<table id="tableId" border="2" width="525" height="50" >
<Font face="verdana">
<th><input type="checkbox" id="check1" onclick="slctall()"> </th>
<th> </th>
<th>Roll number</th>
<th>Name</th>
<th>course</th>
<th>course date</th>
</font>
<tr>
<td>
</td>
<td>
<input type="checkbox" id="cb1" onclick="unchck()">
</td>
<td>
<input type="number" id="n1">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="date">
</td>
</tr>
</table>
<input type="button" id="but1" value="Add more" onclick="fun()">
<input type="button" id="but2" value="Delete" onclick="delrow()"><br>
<input type="button" id="but3" value="Submit" onclick="sub()">
</center>
</body>
<script>
i=2
a=0
j=2
b=1
k=2
c=0
d=1
function fun()
{
var table = document.getElementById("tableId");
var row = table.insertRow(i);
i++;
chekID="cb"+j;
var cell1 = row.insertCell(0);
var cell1 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.id = chekID;
element1.setAttribute('onclick','unchck()');
cell1.appendChild(element1);
j++;
var cell1 = row.insertCell(2);
var element2= document.createElement("input");
element2.type = "number";
element2.name = "t1"
element2.id = "n"+k;
cell1.appendChild(element2);
k++;
var cell1 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "t1"
element3.id = "tid";
cell1.appendChild(element3);
var cell1 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "t1"
element4.id = "tid";
cell1.appendChild(element4);
a=i-1;
var cell1 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "date";
element5.name = "t1"
element5.id = "tid";
cell1.appendChild(element5);
d++;
}
function slctall()
{
for(b=1;b<=j-1;b++)
{
var checkId="cb"+b;
if(document.getElementById(checkId))
{
if(document.getElementById("check1").checked)
{
document.getElementById(checkId).checked = true;
}
else
{
document.getElementById(checkId).checked = false;
}
}
}
}
function unchck()
{
checkAll=true;
for(b=1;b<=j-1;b++)
{
var checkId="cb"+b;
if(document.getElementById(checkId))
{
if(document.getElementById(checkId).checked == false)
{
document.getElementById("check1").checked = false;
checkAll=false;
}
}
}
if(checkAll==true)
document.getElementById("check1").checked = true;
}
function delrow()
{
var deletedRow=0;
for(b=1;b<=j-1;b++)
{
checkId="cb"+b;
if(document.getElementById(checkId))
{
if (document.getElementById("check1").checked || document.getElementById(checkId).checked)
{
i--;
var table = document.getElementById("tableId");
document.getElementById(checkId).parentNode.parentNode.remove();
a--;
c++;
}
else
{
}
}
else
{
deletedRow++;
}
}
document.getElementById("check1").checked = false;
}
function sub()
{
for(b=1;b<=k-1;b++)
{
checkId="cb"+b;
var che="n"+b;
if(document.getElementById(checkId))
{
if(document.getElementById(checkId).checked)
{
alert("checked "+document.getElementById(che).value);
}
else
{
alert("unchecked "+document.getElementById(che).value);
}
}
}
alert("Total number of row created: "+d);
alert("Total number of row deleted: "+c);
var e=d-c;
alert("Total number of row in current: "+e);
}
</script>
</html>