handsonTable单击事件实例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_13296/article/details/82642643

这篇博客展示了如何利用HandsonTable库创建一个可编辑的表格，并详细说明了通过JavaScript实现点击单元格进行内容编辑的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码实现的功能为，创建handsonTable可编辑表格，然后但击任意的cell设置新的内容到这个cell

HTML代码：


<html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>

<body>
    <div id="basic_example"></div>
</body>
</html>

javascript代码：


$(document).ready(function () {
  var container = document.getElementById('basic_example');

  var data = function () {
   return Handsontable.helper.createSpreadsheetData(100, 12);
  };

  var hot = new Handsontable(container, {
    data: data(),
    height: 396,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: true
  });
  //单击事件的回调函数
function callBack(event,coords,td){
	var row = coords.row;
	var col = coords.col;
         if(row!=0 && col!=0){
	      var ss = hot.getCell(row,col,true);//取出点击Cell
               var currVal = $(ss).html();//取出点击Cell的内容
               hot.setDataAtCell(row,col,"修改cell内容","edit");//设置cell的新内容
         }
}
//单击事件
Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot);

});