[Java教程]用JavaScript实现表格编辑器
0 2017-08-01 23:53:26
实现效果:
htm l代码:
表格编辑器表格编辑器
用户名 | 地址 | 电话 |
---|---|---|
tom | 济南 | 12232341 |
qqq | 大时代 | 213231312 |
Css代码:*{ font: 12px/25px 宋体; }h1{ font: 15px/25px 宋体; }table,th,td{ border-collapse: collapse; border: 1px solid #cccccc; }
JS 代码function tableBlurOperator(event){
//获取事件的值 let tdvalue = event.target.value;
//给事件的父类标签赋值 event.target.parentElement.value=tdvalue; } function tableClickOperator(event){
//建立一个text输入框 let input = document.createElement("input"); input.type="text";
//输入框的初始值为原标签上的值 input.value=event.target.innerHTML;
//将原标签的值清空,防止出现两次 event.target.innerHTML="";
//将 text输入框加入到表格中 event.target.appendChild(input);
//在最后获得焦点 input.focus();
//失去焦点的事件 input.addEventListener("blur",tableBlurOperator,false); } function init(){
//点击事件 document.getElementById("myTable").addEventListener("click",tableClickOperator,false); } window.addEventListener("load",init,false);
本文网址:http://www.shaoqun.com/a/318432.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
JavaScript
0