java表格编辑器_[Java教程]用JavaScript实现表格编辑器

[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