Question

我已经完成了一个数据表，它将从Web服务获取数据并填充数据本身。我在数据表中的列上引入了一个操作按钮，该按钮具有<i class="icon-lock">。现在，当我点击此图标时，它应切换并更改为<i class="icon-unlock">

$('#test').dataTable({
            "aaData": realdata,
            "aoColumns": [// "bVisible": false (To disable
        { "sTitle": "First Name", "mData": "FirstName", "sClass": "header2" },
        { "sTitle": "Last Name", "mData": "LastName", "sClass": "header2" },
        { "sTitle": "Email ID", "mData": "Email", "sClass": "header2" },
        { "sTitle": "Role", "mData": "Role", "sClass": "header2" },

                  {
                      "sTitle": "Action", "fnRender": function (oObj) {

                          if (oObj.aData["IsActive"] == "Y")
                              ActionHtml += "<a href='#' class='bs-tooltip Enable' title='' data-original-title='Search'><i class='icon-lock' onclick='EnableUser();'/></i></a>&nbsp|&nbsp";
                          else
                              ActionHtml += "<a href='#' class='bs-tooltip Enable' title='' data-original-title='Search'><i class='icon-unlock' onclick='EnableUser();'/></i></a>&nbsp|&nbsp";

                          return ActionHtml + '</span>';
                      }


                  }
            ]
        });

    });
function EnableUser() {
        $('.icon-lock').toggleClass('icon-unlock');
    }

现在，当点击图标时，我可以通过图标从图标锁定更改为图标解锁来切换功能..但它适用于所有图标该列中的所有行。我希望它一次只应用一行。

Answer 1

试试这个

 $(document).ready(function(){
       $('.icon-lock, .icon-unlock').on('click',function(){
         $(this).toggleClass('icon-lock').toggleClass('icon-unlock');
       });
    });

参见演示DEMO

Answer 2

从HTML中删除onclick并将JS中的单击绑定为

$(document).on('click','.Enable', function(){  
    $(this).find('.glyphicon').toggleClass('glyphicon-lock glyphicon-unlock');  // using glyphicon as class here for the demo
})

Fiddle

您的代码无效，因为您未将this传递给onclick=EnableUser()。然后，您可以使用this并切换类。

我需要在使用Twitter Bootstrap图标的数据表中使用切换选项

2 个答案: