Java Learning resource: JavaScript to ADD and DELETE elements in a TABLE

<html>
<head>
<title>Students</title>
</head>

<SCRIPT>
var count = "0";

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);

cell1.innerHTML=(rowCount);

var cell2 = row.insertCell(1);
var elementname=document.createElement("input");
elementname.type="text";
elementname.name="chkbox[]";
cell2.appendChild(elementname);

var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);

var cell4 = row.insertCell(3);
var element5 = document.createElement("TD");
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">";
element5.innerHTML = strHtml5;
cell4.appendChild(element5);

}

function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);

}

</SCRIPT>

<body>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<TABLE id="dataTable" border="1">
<tr>
<th>S.id</th>
<th>Name</th>
<th>Age</th>
<th>Delete</th>
</tr>

</TABLE>
</body>
</html>

Java Learning resource

JavaScript to ADD and DELETE elements in a TABLE

No comments:

Post a Comment