Editable HTML Table Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of editable HTML table using JavaScript, first here, this topic is done with the help of html and JavaScript. You can also use jQuery, it is not compulsory to use JavaScript.
Because jQuery is also from JavaScript. And performs same functions. Here, our today’s topic is how we are able to make an editable table in html with the help of JavaScript. Let us understand how this can be done.
Step By Step Guide On Editable HTML Table Using JavaScript :-
Now, here we want to show you what our question is. So, we want to make a table in html which is showed on browser. And it is not a simple table, it is a table in which you can edit text.
You can replace, delete and add more text in cell. This can be done with the help of html and JavaScript. Let us show you an example to give you a hint how this can be done.
<!Doctype html>
<html>
<head>
<title>
display data from database
</title>
<style>
table {
width: 1000px;
border-collapse: collapse;
border: 1px solid black;
}
td,
th {
padding: 10px;
font-size: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div id="table">
<table>
<tr>
<th> Name</th>
<th> Roll No </th>
<th> Class </th>
</tr>
<tr>
<td contenteditable="true"> Robert </td>
<td contenteditable="true"> 100 </td>
<td contenteditable="true"> 1st </td>
</tr>
<tr>
<td contenteditable="true"> Tommy </td>
<td contenteditable="true"> 50 </td>
<td contenteditable="true"> 8th </td>
</tr>
<tr>
<td contenteditable="true"> rock</td>
<td contenteditable="true"> 25 </td>
<td contenteditable="true"> 5th </td>
</tr>
<tr>
<td contenteditable="true"> josua</td>
<td contenteditable="true"> 75 </td>
<td contenteditable="true"> 10th </td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
// these are inbuilt function used and not for private use only anyone can use them
$('#table').SetEditable({
// here you are able to write code if you want to add new row
});
//if you to alert or do something after edit, delete then use following functions
onEdit: function() { }, //Edit event
onDelete: function() { }, //Delete event
onAdd: function() { } //Add event
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here we create a body tag, which is a paired tag. All the data which we want to show on webpage is written here.
- Here, we create a table give it CSS or styles. And after this inside table we create table rows and then type data in td. Also, we make a th for heading.
- Now, the main attribute that is used here is contenteditable and the value given to it which is true. Now, at last there is some JavaScript code.
- For this we make you some hint. With the help of which you are able to make one more row, add/ delete/ or edit text in between this.
- We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that with the help of this article we are able to make a table which is editable table and this can be done with the help of html and JavaScript. I hope this tutorial on editable HTML table using JavaScript helps you.
About Ashish
