jq---data()方法的妙用

朱雀 2022-05-28 10:26 201阅读 0赞

有这样一种场景：将左侧表格中的内容在点击添加的时候，右侧列表会增加相应的一列数据，然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作，此时可以用jq的data()方法，在第一步点击左侧表格添加的时候向该行附加数据，然后左侧点击删除的时候根据附加的数据选择对应行！其实质是把附加数据作为标记，代码如下：

// 左侧点击添加到右侧列表  
    $('.nowkucun\_table1').on('click','.add\_putin',function()\{

//获取该行  
        var $tr = $(this).parents('tr');

//向该行附加wid和number数据  
        var wid = $tr.data('wid');  
        var number = $tr.data('number');  
        $(this).text('已加入出库单');  
        $(this).attr('disabled','disabled');  
        $(this).css('color','rgb(180,180,180)');  
        var putout\_text=$(this).parent().siblings('.text\_td').text()

//添加到右侧列表data-wid = "'+wid+'" data-number = "'+number+'"是附加数据，供后面的移除函数调用  
        var putout\_li='<li class="addwuzili" data-wid = "'+wid+'" data-number = "'+number+'">'+'<span>'+putout\_text+'</span>'+'<div><div><div class="reduce">-</div><div><input type="text" name="chukunumber\[\]" class="form-control materia\_num" value="1" readonly><input type="hidden" name="chukuids\[\]" value="'+wid+'" readonly></div><div class="add">+</div></div><div><img src="/assets/admin/images/iconDelete.png" οnclick="removeli(this);"></div></div></li>'  
        $('.nowkucun\_ul').append(putout\_li);  
        $('.no\_putout').hide();  
        hejinum();  
    \})  
      
    //移除改列表，并对应改变左侧表格的数据  
    function removeli(that)\{

//获取刚才添加的数据  
        var wid = $(that).parents('li').data("wid");

//将获取的附加数据用到选择器上  
        $('\#searchlist \#list'+wid).find('td').eq(8).find('.add\_putin').text('加入出库单').removeAttr('disabled').css('color','\#2894FF');  
        $(that).parents('li').remove();  
        if($(".nowkucun\_ul li").length < 2)\{  
            $('.nowkucun\_ul .no\_putout').show();  
        \}  
        hejinum();  
    \}