使用JavaScript實現表格編輯器(實例講解)
編輯：JavaScript技巧
實現效果：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格編輯器</title>
<link rel="stylesheet" type="text/css" href="css/tableWrite.css" rel="external nofollow" />
<script src="js/tableWrite.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>表格編輯器</h1>
<section>
<table id="myTable">
<tbody>
<tr>
<th>用戶名</th>
<th>地址</th>
<th>電話</th>
</tr>
<tr>
<td>tom</td>
<td>濟南</td>
<td>12232341</td>
</tr>
<tr>
<td>qqq</td>
<td>大時代</td>
<td>213231312</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
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);
以上這篇使用JavaScript實現表格編輯器(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。
小編推薦
熱門推薦