Add and delete table information using javascript
Getting Started with JavaScriptJavaScript is a lightweight, interpreted web development language. The language system is not very complicated and is simple and easy to learn. Since all modern browsers have embedded JavaScript engines, JavaScript source code can be directly interpreted and executed in the browser, and users do not have to worry about support issues. This is a small exercise to get started with js. Adding and deleting table informationSimple DOM operation html tag can be achieved, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function delA(){
//Click the hyperlink to delete that row //Use this to delete the parent element var tr = this.parentNode.parentNode;
//Get the name of the person to be deleted var name=tr.getElementsByTagName("td")[0].innerHTML;
//Prompt the user whether to delete var flag=confirm("Do you want to delete "+name+"?");
if(flag){
tr.parentNode.removeChild(tr);
}
//Prevent the browser from default behavior, such as popping up a new tab return false;
}
window.onload = function(){
//Click on the hyperlink to delete an employee's information //Get the link var allA=document.getElementsByTagName("a");
//bind response function for(var i=0;i<allA.length;i++){
allA[i].onclick=delA;
}
//Add employee function, click the button to add information to the table var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick=function(){
//Get the text content in the input box var empName=document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary=document.getElementById("salary").value;
//Create a tr
var tr = document.createElement("tr");
//Add content to tr tr.innerHTML="<td>"+empName+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
var a = tr.getElementsByTagName("a")[0];
a.onclick=delA;
//Put tr in table var employeeTable=document.getElementById("employeeTable");
//Get tbody
var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="">Delete</a></td>
</tr>
<div id="formDiv">
<h4>Add new staff</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName">
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary">
</td>
</tr>
<tr>
<td colspan="2" align="center"> <!--colspan and rowspan attributes are the number of rows and columns that a cell can span-->
<!--align attribute is the text alignment position-->
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</table>
</body>
</html> The comments in the code snippets are very clear and suitable for practicing. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Docker Getting Started Installation Tutorial (Beginner Edition)
Recommend
Using zabbix to monitor the ogg process (Windows platform)
This article introduces how to monitor the ogg pr...
Tutorial on setting up scheduled tasks to backup the Oracle database under Linux
1. Check the character set of the database The ch...
Solutions to MySQL batch insert and unique index problems
MySQL batch insert problem When developing a proj...
A brief analysis of MySQL backup and recovery
Table of contents 1. Introduction 2. Simple defin...
Docker uses the mysqldump command to back up and export mysql data in the project
mysqldump command Introduction: A database backup...
Example of implementing todo application with Vue
background First of all, I would like to state th...
A brief discussion on how to modify/set the environment variable JAVA_HOME under Linux
1. Permanent modification, valid for all users # ...
Three JavaScript methods to solve the Joseph ring problem
Table of contents Overview Problem Description Ci...
Detailed explanation of the time representation example of the Linux time subsystem
Preface In the Linux kernel, in order to be compa...
Install MySQL 5.7 on Ubuntu 18.04
This article is compiled with reference to the My...
Example code for implementing bottom alignment in multiple ways with CSS
Due to the company's business requirements, t...
VMware's detailed tutorial on how to create a Linux virtual machine and set up a virtual machine network
How to create a Linux virtual machine in VMware a...
HTML/CSS Basics - Several precautions in HTML code writing (must read)
The warning points in this article have nothing t...
CSS to achieve Tik Tok subscription button animation effect
I was watching Tik Tok some time ago and thought ...
How to use Docker to build a development environment (Windows and Mac)
Table of contents 1. Benefits of using Docker 2. ...