1. 程式人生 > >動態給table增加複選框,獲取複選框選中的資料

動態給table增加複選框,獲取複選框選中的資料

PS→無奈:失敗只是暫時停止成功,假如我不能,我就一定要;假如我要,我就一定能!

html如下:

 動態給以上table新增複選框,並且獲取選中資料的js如下:

$(function(){
                function initTableCheckbox() {
                    var $thr = $('table thead tr');
                    var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
                    /*將全選/反選複選框新增到表頭最前,即增加一列*/
                    $thr.prepend($checkAllTh);
                    /*“全選/反選”複選框*/
                    var $checkAll = $thr.find('input');
                    $checkAll.click(function(event){
                        /*將所有行的選中狀態設成全選框的選中狀態*/
                        $tbr.find('input').prop('checked',$(this).prop('checked'));
                        /*並調整所有選中行的CSS樣式*/
                        if ($(this).prop('checked')) {
                            $tbr.find('input').parent().parent().addClass('warning');
                        } else{
                            $tbr.find('input').parent().parent().removeClass('warning');
                        }
                        /*阻止向上冒泡,以防再次觸發點選操作*/
                        event.stopPropagation();
                    });
                    /*點選全選框所在單元格時也觸發全選框的點選操作*/
                    $checkAllTh.click(function(){
                        $(this).find('input').click();
                    });
                    var $tbr = $('table tbody tr');
                    var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
                    /*每一行都在最前面插入一個選中複選框的單元格*/
                    $tbr.prepend($checkItemTd);
                    /*點選每一行的選中複選框時*/
                    $tbr.find('input').click(function(event){
                        /*調整選中行的CSS樣式*/
                        $(this).parent().parent().toggleClass('warning');
                        /*如果已經被選中行的行數等於表格的資料行數,將全選框設為選中狀態,否則設為未選中狀態*/
                        $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
                        /*阻止向上冒泡,以防再次觸發點選操作*/
                        event.stopPropagation();
                    });
                    /*點選每一行時也觸發該行的選中操作*/
                    $tbr.click(function(){
                        $(this).find('input').click();
                    });
                }
                initTableCheckbox();
            });

獲取複選框選中資料js如下:

// 獲取複選框被選中的資料
            $("#link-user-r-btn").on('click', function () {
                var checkids = [];
                var dataId = [];
                var dataName = [];
                $("input[name='checkItem']:checked").each(function (i) {
                    checkids[i] = $(this).val();
                });
                if (checkids.length <= 0) {
                    util.error("請至少選擇一條記錄");
                } else {
                    console.log(checkids);
                    $("#dgFlowList").find(":checkbox:checked").each(function () {
                        // var val = $(this).parents("tr").children("input").val();
                        var val = $(this).parents("tr").children("input[name='sid']").val();
                        var val1 = $(this).parents("tr").children("input[name='sname']").val();
                        dataId.push(val);
                        dataName.push(val1);
                    });
})