快捷導(dǎo)航

使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)

更新時(shí)間：2017年08月02日 08:47:56 投稿：jingxian

下面小編就為大家?guī)硪黄褂肑avaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

實(shí)現(xiàn)效果：　　

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>濟(jì)南</td>
      <td>12232341</td>
     </tr>
     <tr>
      <td>qqq</td>
      <td>大時(shí)代</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;
　　　　　　　　　　　　　　　//給事件的父類標(biāo)簽賦值
     event.target.parentElement.value=tdvalue;
    }
    function tableClickOperator(event){
　　　　　　　　　　　　　　//建立一個text輸入框
     let input = document.createElement("input");
     input.type="text";
　　　　　　　　　　　　　　//輸入框的初始值為原標(biāo)簽上的值
     input.value=event.target.innerHTML;
　　　　　　　　　　　　　　//將原標(biāo)簽的值清空，防止出現(xiàn)兩次
     event.target.innerHTML="";
　　　　　　　　　　　　　　//將 text輸入框加入到表格中
     event.target.appendChild(input);
　　　　　　　　　　　　　　//在最后獲得焦點(diǎn)
     input.focus();
　　　　　　　　　　　　　　//失去焦點(diǎn)的事件
     input.addEventListener("blur",tableBlurOperator,false);
    }
   function init(){
　　　　　　　　　　　　　　//點(diǎn)擊事件
    document.getElementById("myTable").addEventListener("click",tableClickOperator,false);
   }
   window.addEventListener("load",init,false);

以上這篇使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解
Bootstrap 提供了一些輔助類，以便更快地實(shí)現(xiàn)對移動設(shè)備友好的開發(fā)。這些可以通過媒體查詢結(jié)合大型、小型和中型設(shè)備，實(shí)現(xiàn)內(nèi)容對設(shè)備的顯示和隱藏。下面通過本文給大家分享Bootstrap 響應(yīng)式實(shí)用工具，一起看看吧
2017-03-03
uniapp微信小程序無法使用本地靜態(tài)資源圖片(背景圖在真機(jī)不顯示)的解決方法
寫微信小程序的時(shí)候,難免會為了趕進(jìn)度而直接使用本地的圖片,在模擬器上的時(shí)候可以正確顯示圖片,但是到手機(jī)上就無法顯示圖片了,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序無法使用本地靜態(tài)資源圖片(背景圖在真機(jī)不顯示)的方法,需要的朋友可以參考下
2022-12-12
微信小程序request請求封裝，驗(yàn)簽代碼實(shí)例
這篇文章主要介紹了微信小程序request請求封裝，驗(yàn)簽代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
預(yù)加載css或javascript的js代碼
為了提高網(wǎng)站的加載速度，有一個很重要的手段就是在用戶瀏覽過程中的上游網(wǎng)站做一個文件的預(yù)加載。
2010-04-04
JavaScript判斷對象和數(shù)組的兩種方法
這篇文章主要介紹了JavaScript判斷對象和數(shù)組的兩種方法,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
JS表單驗(yàn)證的代碼(常用)
最近沒有項(xiàng)目做，有點(diǎn)空余時(shí)間，小編把日常比較常用的js表單驗(yàn)證代碼整理分享到腳本之家平臺，供大家學(xué)習(xí)，需要的朋友參考下吧
2016-04-04
JavaScript與HTML的結(jié)合方法詳解
這篇文章主要介紹了JavaScript與HTML的結(jié)合方法，利用實(shí)例向大家介紹JavaScript與HTML是如何結(jié)合的，內(nèi)容很詳細(xì)，感興趣的小伙伴們可以參考一下
2015-11-11
url 特殊字符傳遞參數(shù)解決方法
有些符號在URL中是不能直接傳遞的，如果要在URL中傳遞這些特殊符號，那么就要使用他們的編碼了。下表中列出了一些URL特殊符號及編碼。
2010-01-01
JS控制TreeView的結(jié)點(diǎn)選擇
這篇文章主要為大家詳細(xì)介紹了JS控制TreeView的結(jié)點(diǎn)選擇,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
js獲取input標(biāo)簽的輸入值實(shí)現(xiàn)代碼
input標(biāo)簽的輸入值通過js進(jìn)行獲取，部分標(biāo)簽和類是封裝在框架內(nèi)的，其效果和html標(biāo)簽差不多，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08