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

有這樣一種場景:將左側表格中的內容在點擊添加的時候,右側列表會增加相應的一列數據,然而反過來還需要點擊右側列的刪除時相應的對左側表格中的對應行操作,此時可以用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();
    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章