handsonTable单击事件实例

这篇博客展示了如何利用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);

});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值