How to Make Html Table Column editable?
You need to add event listener to your cells of table (td), the event should be double click event (dblclick), also note that, we have to create a activeCell variable to store, which cell is activated,
let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
cell.addEventListener('dblclick', function() {
// to do
});
}
On event listener's to do code block, you need to make innerHTML of cell's an input or textarea with JavaScript,
for(let cell of cells) {
cell.addEventListener('dblclick', function() {
if(this.childElementCount == 0) {
let input = document.createElement('input');
input.setAttribute('type', 'textbox');
input.setAttribute('value', this.innerHTML);
this.innerHTML = "";
this.appendChild(input);
activeCell = this;
}
});
}
When user, clicks outside of the activated table cell, save the new value of cell's input and make it back a normal text, with mouseup event listener,
document.addEventListener('mouseup', function(e) {
if(activeCell != null) {
let container = activeCell.children[0];
if (!$(container).is(e.target) && $(container).has(e.target).length === 0)
{
activeCell.innerHTML = container.value;
activeCell = null;
}
}
});
I have used, some methods with JQuery, these are .is and .has for checking the clicked object is not activated cell.
Final code is, look like this,
let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
cell.addEventListener('dblclick', function() {
if(this.childElementCount == 0) {
let input = document.createElement('input');
input.setAttribute('type', 'textbox');
input.setAttribute('value', this.innerHTML);
this.innerHTML = "";
this.appendChild(input);
activeCell = this;
}
});
}
document.addEventListener('mouseup', function(e) {
if(activeCell != null) {
let container = activeCell.children[0];
if (!$(container).is(e.target) && $(container).has(e.target).length === 0)
{
activeCell.innerHTML = container.value;
activeCell = null;
}
}
});
Have a good day :)
Editable table cell with the least side effect
Click dogs and edit away.
<table>
<td contenteditable style="border: 1px solid black; outline: 0px;">dogs</td>
</table>
How to make a HTML table cell into a editable text box
- First include the jQuery library
- Than put your script
- You might want to take a look at contenteditable Elements
which would than look pretty much like this:
$(function() {
var $td = $("td");
$td.on({ "keypress" : function(e) { if (e.which !== 13) { // On Return key - "save" cell e.preventDefault(); $(this).prop("contenteditable", false); } }, "dblclick" : function() { $td.not(this).prop("contenteditable", false); $(this).prop("contenteditable", true); } });
});
td, th { padding:5px; border: 1px solid #ddd; }td[contenteditable=true] { outline: 2px solid #0af; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Double-click</b> on a table cell to edit</p>r
<table> <thead> <tr> <th>Code</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>000</td> <td>Roko</td> <td>roko@example.com</td> <td>021-321-4321</td> </tr> <tr> <td>001</td> <td>Shahid</td> <td>shahid@example.com</td> <td>012-123-1234</td> </tr> </tbody></table>
How to make a partially un-editable table cell?
You could just use two span
elements, make one of them contenteditable
. Example:
table { width: 100%; border-collapse: collapse;}
th, td { border: 1px solid black;}
.input { display: flex; justify-content: space-between}
span { padding: 0.5em;}
.value { flex-grow: 1;}
<table> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> </thead> <tbody> <tr> <td>Entry 1</td> <td class="input"><span class="value" contenteditable="">10</span><span class="unit">kg</span></td> </tr> <tr> <td>Entry 1</td> <td class="input"><span class="value" contenteditable="">20</span><span class="unit">kg</span></td> </tr> </tbody></table>
Related Topics
How to Prevent Flex-Items from Overflowing Flex Parent With No Wrap
How to Give Multiple Conditions in *Ngif Statement in Angular 6
How to View HTML File in Remote Unix Server
Large File Upload Though HTML Form (More Than 2 Gb)
Angular:Failed to Load Images: 404 (Not Found)
How to Center a Flex Container But Left-Align Flex Items
How to Hide a Text and Make It Accessible by Screen Reader
How to Style the Parent Element When Hovering a Child Element
How to Remove Hover Effect from Bootstrap Button
How to Playback Mkv Video in Web Browser
Make Content Horizontally Scroll Inside a Div
Embed Pdf on a Webpage and Prevent Download
How to Always Show the Vertical Scrollbar in a Browser
Are (Non-Void) Self-Closing Tags Valid in Html5
How to Keep Parents of Floated Elements from Collapsing
How to Match Width of Text to Width of Dynamically Sized Image/Title