Hi,
In the below code am trying to show how to add, edit and remove the text using javascript
<!doctype html>
<html>
<head>
<title>Database Row Editer</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script>
function removeRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
function addRow() {
var name = prompt("Please enter your name:");
if (name == null || name == "") {
return;
}
var email = prompt("Please enter your email:");
if (email == null || email == "") {
return;
}
var birthDate = prompt("Please enter your Birth Date");
if (birthDate == null || birthDate == "") {
return;
}
var MyTable = document.getElementById("myTable");
// insert new row.
var NewRow = MyTable.insertRow(MyTable.rows.length);
// insert new columns
var NewName = NewRow.insertCell(0);
var NewEmail = NewRow.insertCell(1);
var NewDateOfBirth = NewRow.insertCell(2);
var NewAction = NewRow.insertCell(3);
NewName.innerHTML = name;
NewEmail.innerHTML = email;
NewDateOfBirth.innerHTML = birthDate;
NewAction.innerHTML = '<button onclick="removeRow(this)">Remove</button> <button onclick="editRow(this)">Edit</button>';
}
function editRow(r) {
var i = r.parentNode.parentNode.rowIndex;
name = prompt("Please enter the new name:");
if (name == null || name == "") {
return;
}
var firstColumn = document.getElementById("myTable").rows[i];
firstColumn.deleteCell(0);
NewName = firstColumn.insertCell(0);
NewName.innerHTML = name;
}
</script>
</head>
<body class="content-container">
<button onclick = "addRow()" style = "float:right;">Add row</button>
<h2>HTML Table</h2>
<table id = "myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th data-type = "date">Date of Birth</th>
<th>Actions</th>
</tr>
<tr>
<td>"Nikhil Dodley"</td>
<td>"ndodley@yahoo.com"</td>
<td>08/09/1996</td>
<td>
<input type = "button" value = "Remove" onclick = "removeRow(this)">
<input type = "button" value = "Edit" onclick = "editRow(this)">
</td>
</tr>
<tr>
<td>"Krishna Vamshi"</td>
<td>"kv9993@gmail.com"</td>
<td>11/29/1990</td>
<td>
<input type = "button" value = "Remove" onclick = "removeRow(this)">
<input type = "button" value = "Edit" onclick = "editRow(this)">
</td>
</tr>
<tr>
<td>"Manideep</td>
<td>"manideep.r@techouts.com"</td>
<td>05/08/1992</td>
<td>
<input type = "button" value = "Remove" onclick = "removeRow(this)">
<input type = "button" value = "Edit" onclick = "editRow(this)">
</td>
</tr>
<tr>
<td>"Manikanta"</td>
<td>"manikanta@techouts.com"</td>
<td>05/26/1996</td>
<td>
<input type = "button" value = "Remove" onclick = "removeRow(this)">
<input type = "button" value = "Edit" onclick = "editRow(this)">
</td>
</tr>
</table>
<script src="myScript.js"></script>
</body>
</html>