Javascript Tutorial: Make HTML Table content editable NO Jquery

Показать описание

In this video we will see how to make HTML Table content editable with Javascript.
I will not use Jquery or any Javascript library.

keywords:
html table editable,
contenteditable,
editable html table cells,
onfocus event,
onblur event

You may also like:
How to Filter HTML Table

If you want to learn more about Programming with Javascript, please check my playlist.

Рекомендации по теме

Комментарии

I have struggled with a lot of Javascript concepts but your code and explanation have enlightened me. Thank you greatly.

normanwinn

Thanks a lot for this video.
IT is SO much better than jquery because U control all proces step by step.
Good lesson from me 🙂

przemaskarol

Good job !
Can you add a combox with value and text.
Does it support Arrows keys for navigation between the cells, like excel sheet?

myWorldDiscover

var table =
var cells =
for (var i = 0; i < cells.length; i++) {
cells[i].onclick = function(){
//console.log('clicked');
if {
return;
}
this.setAttribute('data-clicked', 'yes');
this.setAttribute('data-text', this.innerHTML);

var input =
input.setAttribute('type', 'text');
input.value = this.innerHTML;
input.style.width = this.offsetWidth - (this.clientLeft * 2) + "px";
input.style.height = this.offsetHeight - (this.clientTop * 2) + "px";
input.style.border = "0px";
input.style.fontFamily = "inherit";
input.style.fontSize = "inherit";
input.style.backgroundColor = "LightGoldenRodYellow";

input.onblur = function() {
var th = input.parentElement;
var orig_text =
var current_text = this.value;

if (orig_text != current_text) {
//there are changes; save to geojson

td.innerHTML = current_text;
td.style.cssText = 'padding: 5px'
console.log(orig_text + ' is changed to ' + current_text);
} else {

td.innerHTML = orig_text;
td.style.cssText = 'padding: 5px'
console.log('no changes');
}
}
input.onkeypress = function() {
if (event.keycode == 13) {
this.blur();
}
}
this.innerHTML = '';
this.style.cssText = 'padding: 0px 0px';
this.append(input);

}
}
//console.log(cells);

...you're welcome 😊
..
.ps: in case the onkeypress function doesn't work, i replaced (event.keycode == 13) with (event.key === "Enter").

DNSQi

Thank you. A nice one. Is the source code available for download?

doctorshadow

Great video. Waiting for the ajax one now.

fabianblabla

this is good sir. .are you still active? how can you edit only specific cells? example that age column which is the cells[3] from all the table rows? something like rows[i].cells[3]

ohwell

Man, you are simply amazing, thank a lot for this again useful video

jeanyvesfondu

How to make input=text when edit is attr text, when input=date attr is date? And my table there is checkbox in td, can take effect to checkbox too 🙏

gilangwahyutama