【datatable】给单元格添加事件

最新推荐文章于 2023-04-02 14:51:08 发布

贝阿朵今天依然鬼笑

最新推荐文章于 2023-04-02 14:51:08 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： jquery datatable

本文链接：https://blog.csdn.net/u014458962/article/details/107715036

JS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在使用Datatable时为表格的特定列（如comments列）添加双击事件，以实现为每个单元格添加注释的功能。通过设置createCell属性并利用回调函数，可以获取单元格DOM元素及对应行信息，从而实现个性化的注释添加。

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

最近有个需求，给一个用datatable做的表格的某一列添加增加注释的功能，demo如下：

我需要给comments那一列的每一个单元格添加双击事件，用来实现添加注释的功能——假如我要给Mary 添加“bad girl”的 comments，jerry的comments还得是good boy，不能跟着一起变形了对吧。

搜索了一下找到了办法：使用createCell属性。

demo code如下（我没有把添加comments的功能都做完，不过只要能获取到单个单元格的dom元素和对应行的相关信息，其他都是力气活了）

<table class="table">
    <thead>
    <tr>
        <th>name</th>
        <th>age</th>
        <th>grade</th>
        <th>comments</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script type="text/javascript">
    var data = [
    {
    'name': 'jerry',
    'age': 12,
    'grade': 90,
    'comments':'good boy'},
    {
    'name': 'mary',
    'age': 12,
    'grade': 80,
    'comments':'good girl'},


    ]
    $('table').DataTable({
    data:data,
    columns: [
    {'data':'name'},
    {'data':'age'},
    {'data':'grade'},
    {'data':'comments',
        'createdCell': function(nTd, sData, oData, iRow, iCol){
            $(nTd).dblclick(
                function(){
                    alert('aha!');
                    console.log(nTd, sData, oData, iRow, iCol);
                }
            );
            $(nTd).attr('title','double click to edit comments');
        }
    },
    ]

    });

</script>

结果：