时间戳

首页 > 解决方案 > 数据表分隔不同的按钮

javascript - 数据表分隔不同的按钮

问题描述

我有数据表，数据表行中有两个按钮，我想将它们分开，因为一个用于删除，一个用于编辑。我用js，添加什么按钮。下图 在此处输入图像描述

现在然后我按编辑或删除我得到了同样的结果。我的代码js代码

        'columnDefs': [
            {
               targets: 2, render: function(data1){ return moment(data1).format('dddd')},
            },
            {
               targets: -1, defaultContent: '<button class="btn btn-secondary" data-dismiss="modal" id="Edit" type="button">Edit</button>'
                 + '&nbsp <button class="btn btn-danger" id="Delete" data-dismiss="modal" type="button">Delete</button>'
            },
            { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
        ]
    } );

   $('#calEvents').on( 'click', 'button', function () {
   //Unnecessary code
 });

现在我只有删除功能，因为我无法测试它们是否像一个一样工作。

编辑（添加 html 代码）对于数据表，我的 html 代码是：

 <div class="row-90">
        <table class="table display" id="calEvents">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">TICKER</th>
                    <th scope="col">EVENT</th>
                    <th scope="col">READX</th>
                    <th scope="col">ACTION</th>
               
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">TICKER</th>
                    <th scope="col">EVENT</th>
                    <th scope="col">READX</th>
                    <th scope="col">ACTION</th>
        
                   
                </tr>
            </tfoot>
        </table>
    </div>

标签： javascriptjquerydatatable

解决方案

设置事件处理程序时，您正在调用$('#calEvents').on( 'click', 'button', function () {. 这将应用于所有按钮。您将需要两个单独的函数和事件处理程序。

也许确保edit并delete具有不同的 CSS 类，然后您可以在 jQuery 选择器中使用它们以应用两个不同的事件处理程序。

推荐阅读