javascript 使用jQuery检索表中的id数据属性

nfs0ujit  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(127)

我有一个表,每行动态填充以下代码

<td data-id="x">
    <div class="dropdown dropdown-inline">
        <a href="javascript:;" class="btn btn-sm btn-clean btn-icon" data-toggle="dropdown">
            <i class="la la-cog"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
            <ul class="nav nav-hoverable flex-column">
                <li class="nav-item"><a class="nav-link activate-user" href="#"><i class="nav-icon la la-heart"></i><span class="nav-text">Activate</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="nav-icon la la-leaf"></i><span class="nav-text">Update Status</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#"><i class="nav-icon la la-print"></i><span class="nav-text">Print</span></a></li>
            </ul>
        </div>
    </div>
    <a href="javascript:;" class="btn btn-sm btn-clean btn-icon edit-user" title="Edit details">
        <i class="la la-edit"></i>
    </a>
    <a href="javascript:;" class="btn btn-sm btn-clean btn-icon delete-user" title="Delete">
        <i class="la la-trash"></i>
    </a>
</td>

我需要在TD标签中获取x数据ID属性。
使用下面的代码,当我点击最新的锚标签时,我可以成功地获得ID,但如果我点击下拉链接,就无法获得ID......我只是一个未定义的值。

$("body").on("click",".edit-user",function(e){
    //console.log('Clicked edit button');
    var id = $(this).parents('td').data('id');
    if(id != null) {
        e.preventDefault();
        console.log('You want ot edit user with id ' + id);
    }
});

在下拉菜单中获取ID数据属性有什么帮助吗?
谢谢你的帮助
要使用下拉链接获取ID,我使用以下代码:

$("body").on("click",".nav-item",function(e){
    console.log('Clicked nav item');
    var id = $(this).parents('td').data('id');
    if(id != null) {
        e.preventDefault();
        if($(this).find("i").hasClass("la-heart")) {
            //editContributer(id);
            console.log('You want to activate user id ' + id);
        }
        if($(this).find("i").hasClass("la-mdi-delete-outline")) {
            deleteContributer(id);
        }
        if($(this).find("i").hasClass("la-heart-broken")) {
            //hideContributer(id);
            console.log('You want to de activate userd id ' + id);
        }
        if($(this).find("i").hasClass("mdi-image-search-outline")) {
            //picturesContributer(id);
        }
        if($(this).find("i").hasClass("mdi-account-search-outline")) {
            //accountCOntributer(id);
        }
        if($(this).find("i").hasClass("mdi-file-hidden")) {
            //deleteContributerPictures(id);
        }
    }
});
ulydmbyx

ulydmbyx1#

//use 'attr' instead of 'data'
$("body").on("click",".edit-user",function(e){
    //console.log('Clicked edit button');
    var id = $(this).parents('td').attr('data-id');//modified
    //var id = $(this).parents('td').data('id');
    if(id != null) {
        e.preventDefault();
        console.log('You want ot edit user with id ' + id);
    }
});

$("body").on("click",".nav-item",function(e){
    console.log('Clicked nav item');
    //var id = $(this).parents('td').data('id');
    var id = $(this).parents('td').attr('data-id');//modified
    if(id != null) {
        e.preventDefault();
        if($(this).find("i").hasClass("la-heart")) {
            //editContributer(id);
            console.log('You want to activate user id ' + id);
        }
        if($(this).find("i").hasClass("la-mdi-delete-outline")) {
            deleteContributer(id);
        }
        if($(this).find("i").hasClass("la-heart-broken")) {
            //hideContributer(id);
            console.log('You want to de activate userd id ' + id);
        }
        if($(this).find("i").hasClass("mdi-image-search-outline")) {
            //picturesContributer(id);
        }
        if($(this).find("i").hasClass("mdi-account-search-outline")) {
            //accountCOntributer(id);
        }
        if($(this).find("i").hasClass("mdi-file-hidden")) {
            //deleteContributerPictures(id);
        }
    }
});

相关问题