[jQuery]新增或刪除table列

  • 4201
  • 0

摘要:[jQuery]新增或刪除table列

 //單純的新增一列到table
        function AddRow(ym) {
            //如果沒有加上first, 雖然clone仍然會成功, 但是在after的時候,就會把新的row塞在197,160.50那個td
            //畫面就會跑掉
            var srcrow = $("table[id*=gvShowData1] tr:contains('197,160.50'):first");
            var newrow = srcrow.clone();
            srcrow.after(newrow);
            return false;
        }

        //單純的從table刪除一列
        function DelRow() {
            var srcrow = $("table[id*=gvShowData1] tr:contains('197,160.50'):first").remove();
            return false;
        }
       
        //Grid裡面動態顯示區域的詳細資料,例如:
        //北區:台北市,桃園市,中區:台中市、苗栗市
        //acct_month:年月,dc_no:代扣廠商代碼,DC_NAME:代扣廠商名稱
        // PMA_NAME:名稱,PDS_TYPE_NAME:罰款類型
        function AddDelRow(acct_month, dc_no,DC_NAME, PMA_NAME, PDS_TYPE_NAME,ID) {
            //根據pk, 用jQuery抓出此列 tr            
            var srcrow = $("table[id*=gvShowData] tr:contains('" + acct_month +
            "'):contains('" + dc_no + "'):contains('" + PMA_NAME + "'):contains('" + PDS_TYPE_NAME + "'):first");
            //alert(acct_month + ',' + dc_no + ',' + PMA_NAME + ',' + PDS_TYPE_NAME);

            if ($("#" + ID).attr("value") == "+") {
                //alert('現在是加號');
                //ajax回後端取得區域詳細資料(JSon格式)          
                var promise = AjaxGetDistrict();
                var distAmtJSonString = ""; //後端取得的json結果
                var distAmtJSonObject; //把JSon物件化
                var space = ' ';
                promise.done(function (result) {
                    distAmtJSonObject = jQuery.parseJSON(result.d);
                    //用迴圈的方式逐筆印出
                    for (var i = 0; i < distAmtJSonObject.length; i++) {
                        var newrow = srcrow.clone(); //從來源row複製整個內容                 
                        newrow.find("td").each(function () {
                            //$(this).empty();
                            var tdContent = $(this).html();
                            //如果此td是代扣廠商代碼的話,就換掉內容
                            if (tdContent.indexOf(dc_no) >= 0) {
                                $(this).html(''); //清空內容,換成我們要的
                                $(this).html(space + space + space + distAmtJSonObject[i].Area);
                            }
                            else if(tdContent.indexOf(DC_NAME) >= 0 ){
                                $(this).html(''); //清空內容,換成我們要的
                                $(this).html(space + space + space + distAmtJSonObject[i].Amt + "萬");
                            }   
                            else {
                                //如果是其他的欄位,就清空
                                $(this).html('');
                            }
                        });
                        //然後加入grid裡面
                        srcrow.after(newrow);
                    }
                    $("#" + ID).attr("value", "-");
                });
            }
            else {
                //alert('現在是減號');
                //下一個tr的第一個td如果是空的,就刪除下一個tr
                while (srcrow.next().find("td:first").html() == "") {
                    srcrow.next().remove();
                }
                $("#" + ID).attr("value", "+");
            }            
            return false;          
        }

        //Ajax的方式去資料庫取得區域的詳細資料,例如
        //北區:台北市,桃園市,中區:台中市、苗栗市
        function AjaxGetDistrict() {
            return $.ajax({
                type: "post",
                url: "PDS12.aspx/AjaxGetDistrict",
                //不用傳參數的話,放個大括弧就好
                //data: "{}",
                data: '{districtName: "' + '北區' + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        }

 

code_behind:

btnTest.Attributes.Add("onclick", "return AddDelRow('" + acct_month + "','" + dc_no + "','" + DC_NAME +
                        "','" + PMA_NAME + "','" + PDS_TYPE_NAME + "','" + btnTest.ClientID + "')");