Chỉnh sửa JavaScript của ô bảng

Chào mừng bạn đến với hướng dẫn về cách tạo bảng HTML có thể chỉnh sửa. Chà, tạo một bảng có thể chỉnh sửa theo đúng nghĩa đen là thêm thuộc tính

// [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener["DOMContentLoaded", [] => {
  for [let cell of document.querySelectorAll[".editable td"]] {
    cell.ondblclick = [] => editable.edit[cell];
  }
}];

2 vào ô

// [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener["DOMContentLoaded", [] => {
  for [let cell of document.querySelectorAll[".editable td"]] {
    cell.ondblclick = [] => editable.edit[cell];
  }
}];

3 bằng một cú nhấp đúp. Nhưng nó vẫn yêu cầu khá nhiều đoạn mã – Đọc tiếp để biết ví dụ

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

MỤC LỤC

Tải xuống & Trình diễn

Bảng HTML có thể chỉnh sửa

Bit bổ sung & liên kết

Kết thúc

 

TẢI XUỐNG & THỬ NGHIỆM

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

 

BẢNG DEMO CÓ THỂ CHỈNH SỬA

TênEmailJob Doejob@doe. com Joe Doe Joe@doe. comJoi Doejoi@doe. comJon Doejon@doe. comJoy Doejoy@doe. com

Bấm đúp vào một ô để chỉnh sửa. Sau đó nhấn “enter” để cam kết hoặc “escape” để hủy bỏ

 

 

BẢNG HTML CÓ THỂ CHỈNH SỬA

Được rồi, bây giờ chúng ta hãy tìm hiểu thêm chi tiết về cách hoạt động của bảng HTML có thể chỉnh sửa

 

PHẦN 1] HTML

bảng chỉnh sửa. html

      Name
      Email
    

  
  

    

  
 
  
  

    

      
Job Doe
      
job@doe.com
    
    

      
Joe Doe
      
joe@doe.com
    
    

      
Joi Doe
      
joi@doe.com
    
    

      
Jon Doe
      
jon@doe.com
    
    

      
Joy Doe
      
joy@doe.com
    
  

Chà, không có gì đặc biệt ở đây. Đây chỉ là một “bảng HTML bình thường” với một lớp CSS

// [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener["DOMContentLoaded", [] => {
  for [let cell of document.querySelectorAll[".editable td"]] {
    cell.ondblclick = [] => editable.edit[cell];
  }
}];

4

 

 

PHẦN 2] JAVASCRIPT

2A] NHẤP ĐÔI ĐỂ “CHỈNH SỬA Ô”

bảng chỉnh sửa. js

// [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener["DOMContentLoaded", [] => {
  for [let cell of document.querySelectorAll[".editable td"]] {
    cell.ondblclick = [] => editable.edit[cell];
  }
}];

Phép thuật biến “bảng HTML bình thường” thành “bảng HTML có thể chỉnh sửa” nằm ở Javascript. Điều đầu tiên chúng ta cần làm là đính kèm một trình nghe kích đúp vào tất cả các ô của bảng

// [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener["DOMContentLoaded", [] => {
  for [let cell of document.querySelectorAll[".editable td"]] {
    cell.ondblclick = [] => editable.edit[cell];
  }
}];

3

 

2B] Ô “CHUYỂN ĐỔI” THÀNH TRƯỜNG CÓ THỂ CHỈNH SỬA

bảng chỉnh sửa. js

var editable = {
  // [B] PROPERTIES
  selected : null, // current selected cell
  value : "", // current selected cell value
 
  // [C] "CONVERT" TO EDITABLE CELL
  edit : cell => {
    // [C1] REMOVE "DOUBLE CLICK TO EDIT"
    cell.ondblclick = "";
 
    // [C2] EDITABLE CONTENT
    cell.contentEditable = true;
    cell.focus[];
 
    // [C3] "MARK" CURRENT SELECTED CELL
    cell.classList.add["edit"];
    editable.selected = cell;
    editable.value = cell.innerHTML;
 
    // [C4] PRESS ENTER/ESC OR CLICK OUTSIDE TO END EDIT
    window.addEventListener["click", editable.close];
    cell.onkeydown = evt => {
      if [evt.key=="Enter" || evt.key=="Escape"] {
        editable.close[evt.key=="Enter" ? true : false];
        return false;
      }
    };
  },
  // ...
};

Bài này hơi dài dòng, nhưng hãy bình tĩnh và xem xét kỹ. Khi nhấp đúp vào một ô, tất cả điều này về cơ bản là

• [C1] Bỏ “nháy đúp” để chỉnh sửa ô… Vì nó đã ở “chế độ chỉnh sửa”
• [C2] Đặt

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  2 trên ô đã chọn và đặt tiêu điểm vào ô đó
• [C3] Đặt “ô hiện đang chỉnh sửa” thành

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  0 và giá trị hiện tại của nó thành

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  1
• [C4] Có 2 cách để kết thúc “chế độ chỉnh sửa”
  • Nhấp vào bên ngoài của

    // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
    window.addEventListener["DOMContentLoaded", [] => {
      for [let cell of document.querySelectorAll[".editable td"]] {
        cell.ondblclick = [] => editable.edit[cell];
      }
    }];

    0
  • Bằng cách nhấn “enter” hoặc “escape” trong vòng

    // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
    window.addEventListener["DOMContentLoaded", [] => {
      for [let cell of document.querySelectorAll[".editable td"]] {
        cell.ondblclick = [] => editable.edit[cell];
      }
    }];

    0

 

 

2C] KẾT THÚC “CHẾ ĐỘ CHỈNH SỬA”

bảng chỉnh sửa. js

// [D] END "EDIT MODE"
close : evt => { if [evt.target != editable.selected] {
  // [D1] CANCEL - RESTORE PREVIOUS VALUE
  if [evt === false] {
    editable.selected.innerHTML = editable.value;
  }
 
  // [D2] REMOVE "EDITABLE"
  window.getSelection[].removeAllRanges[];
  editable.selected.contentEditable = false;

  // [D3] RESTORE CLICK LISTENERS
  window.removeEventListener["click", editable.close];
  let cell = editable.selected;
  cell.ondblclick = [] => editable.edit[cell];
 
  // [D4] "UNMARK" CURRENT SELECTED CELL
  editable.selected.classList.remove["edit"];
  editable.selected = null;
  editable.value = "";
 
  // [D5] DO WHATEVER YOU NEED
  if [evt !== false] {
    console.log[cell.innerHTML];
    // check value?
    // send value to server?
    // update calculations in table?
  }
}}

Cuối cùng, điều này sẽ xử lý việc kết thúc “chế độ chỉnh sửa” – Khi người dùng nhấp vào bên ngoài ô hoặc bằng cách nhấn

// [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener["DOMContentLoaded", [] => {
  for [let cell of document.querySelectorAll[".editable td"]] {
    cell.ondblclick = [] => editable.edit[cell];
  }
}];

4

• [D1] Khi người dùng nhấn thoát để “hủy chỉnh sửa” – Khôi phục về giá trị trước đó của ô
• [D2] Xóa thuộc tính

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  2 và “khôi phục” nó thành một

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  3 bình thường
• [D3] Xóa trình nghe “nhấp để kết thúc chế độ chỉnh sửa” và gắn lại “nhấp đúp để chỉnh sửa ô”
• [D4] Xóa “ô đang chỉnh sửa”
• [D5] Phần này tùy thuộc vào bạn để hoàn thành. Làm bất cứ điều gì được yêu cầu trong dự án của riêng bạn

 

PHẦN 3] CSS

bảng chỉnh sửa. css

/* [A] ENTIRE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
 
/* [B] EDITABLE TABLE */
.editable {
  border-collapse: collapse;
}
.editable th, .editable td {
  text-align: left;
  padding: 15px;
}
.editable tbody tr:nth-child[even] {
  background: #f2f2f2;
}
.editable td.edit {
  background: #f8ff88;
}

Không quan trọng thực sự. Chỉ cần một số mỹ phẩm để làm cho mọi thứ trông đẹp hơn

 

 

BIT BỔ SUNG & LIÊN KẾT

Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

LÀM THẾ NÀO ĐỂ TẠO GIÁ TRỊ CELL VÀO MỘT ID?

• Chỉ cần thêm một thuộc tính dữ liệu tùy chỉnh vào các ô của bảng

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  7
• Lấy giá trị ô và dữ liệu tùy chỉnh trong Javascript –

  // [A] INITIALIZE - DOUBLE CLICK TO EDIT CELL
  window.addEventListener["DOMContentLoaded", [] => {
    for [let cell of document.querySelectorAll[".editable td"]] {
      cell.ondblclick = [] => editable.edit[cell];
    }
  }];

  8

 

KIỂM TRA TÍNH TƯƠNG THÍCH

• Chức năng mũi tên – CanIUse
• Nội dung có thể chỉnh sửa – CanIUse

Ví dụ này sẽ hoạt động trên tất cả các trình duyệt hiện đại

 

LIÊN KẾT và THAM KHẢO

• Bảng HTML có thể sắp xếp – Code Boxx
• Ví dụ về CodePen – Bảng HTML có thể chỉnh sửa
• Thuộc tính dữ liệu tùy chỉnh HTML – MDN

 

KẾT THÚC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa vui vẻ