首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

HTML 表格單元格跨行跨列合並:jQuery 實現類 Excel 選中合並

     編輯:程式設計疑難解答

核心邏輯

  1. 滑鼠按下記錄起始單元格 data-row, data-col
  2. 滑鼠移動計算終止單元格,高亮選區(rowSpan/colSpan 視覺反饋)
  3. 滑鼠釋放彈出確認,執行合並:
    • 起始單元格設置 rowSpan = rowCount, colSpan = colCount
    • 隱藏被合並的單元格 style.display='none'

關鍵難點

  • 合並後索引映射維護(建議維护二維數組模型)
  • 取消合並時恢復 rowSpan/colSpan=1 並顯示隱藏單元格
  • 合並單元格內輸入框、下拉框等控件的值保存

現成插件推薦

Handsontable - 類 Excel 功能全;UEditor 表格模塊 - 輕量。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved