动态生成table的JS(笔记)

var table = document.getElementById("classTable") ;
    //表格行数
    var index = table.rows.length-1 ;
    var row = 1;
    function add(){
        var tab = document.getElementById("classTable") ;
        //表格行数
        var row1 = tab.rows.length-1 ;
        row1++;
        row++;
        // if(row==1){
        //     $("#goodsPrice").hide();
        //     $("#goodsNum").hide();
        //     $("#goodsOriginalBarcode").hide();
        // }
        var $li = $(
            "<tr class=\"text-c\" id="+row+" style=\"background: #fff;\"><td id='"+row+"td1' style=\"font-size: 10px;padding: 5px 3px;\">"+row1+"</td>"+
            "<td id='"+row+"td2' style=\"font-size: 10px;padding: 5px 3px;\"><input class=\"input-text t\" style='width: 100%;height: 100%;border: none;outline: none;' type='text' name='originalBarcode' onchange=\"originalBarcodeChange(this.id)\" id='originalBarcode"+row+"' placeholder=\"库存商品编码\"></td>"+
            "<td id='"+row+"td3' style=\"font-size: 10px;padding: 5px 3px;\"><div></div><input type=\"hidden\" style=\"border: none\" class=\"input-text\" t name=\"pic\" id=\"pic"+row+"\"/></td>"+
            "<td id='"+row+"td4' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" style=\"border: none\" class=\"input-text\" name=\"stockName\" id=\"stockName"+row+"\"/></td>"+
            "<td id='"+row+"td5' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" style=\"border: none\" class=\"input-text\" name=\"stardardName\" id=\"stardardName"+row+"\"/></td>"+
            "<td id='"+row+"td6' style=\"font-size: 10px;padding: 5px 3px;\"></td>"+
            "<td id='"+row+"td7' style=\"font-size: 10px;padding: 5px 3px;\"></td>"+
            "<td id='"+row+"td8' style=\"font-size: 10px;padding: 5px 3px;\"></td>"+
            "<td id='"+row+"td9' style=\"font-size: 10px;padding: 5px 3px;\"></td>"+
            "<td id='"+row+"td10' style=\"font-size: 10px;padding: 5px 3px;\"></td>"+
            "<td id='"+row+"td11' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" class=\"text\" name=\"ensureTimes\" onchange=\"ensureChage(this.id)\" id='ensureTime"+row+"' placeholder=\"请填写保质期(单位/天数)\" style='width: 100%;height: 100%;border: none;outline: none;' required></td>"+
            "<td id='"+row+"td12' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" class=\"input-text \" name=\"productionTimes\" placeholder=\"请填写生产日期\" style='border: none;outline: none;' required id='productionTime"+row+"' onchange=\"productionChage(this.id)\" ></td>"+
            "<td id='"+row+"td13' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" class=\"input-text \" name=\"effectiveTimes\" placeholder=\"请填写有效期至\" style='border: none;outline: none;' required id='effectiveTime"+row+"' onchange=\"effectiveChage(this.id)\"></td>"+
            "<td id='"+row+"td14' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" onchange=\"latestPriceChange(this.id)\" class=\"input-text\" name=\"latestPrices\" id='latestPrice"+row+"' style='width: 100%;height: 100%;border: none;outline: none;' required></td>"+
            "<td id='"+row+"td15' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" onchange=\"sellingPriceChange(this.id)\" class=\"input-text\" name=\"sellingPrices\" id='sellingPrice"+row+"' placeholder=\"填写最新售价\" style='width: 100%;height: 100%;border: none;outline: none;'></td>"+
            "<td id='"+row+"td16' style=\"font-size: 10px;padding: 5px 3px;\"></td>"+
            "<td id='"+row+"td17' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" onchange=\"stockNumChange(this.id)\" class=\"input-text\" name=\"stockNums\" id='stockNum"+row+"' placeholder=\"填写入库数量\" style='width: 100%;height: 100%;border: none;outline: none;'></td>"+
            // "<td><input class=\"input-text t\" type='text' name='originalBarcodes' style='width: 100%;height: 100%;border: none;outline: none;' onchange=\"checkName(this);\"></td>"+
            "<td id='"+row+"td18' style=\"font-size: 10px;padding: 5px 3px;\"><input type=\"input-text\" onchange=\"toatlChage(this.id)\" style=\"border: none\" class=\"input-text\"   placeholder=\"填写入库数量\" id=\"totalPrice"+row+"\" /></td>"+
            "<td id='"+row+"td19' style=\"font-size: 10px;padding: 5px 3px;\"><span style='cursor: pointer;' id='span"+row+"' onclick='sub("+row+")'>x</span></td>"+
            "<input type=\"hidden\" class=\"input-text\"  name=\"stockFirstTypeIds\" id=\"stockFirstTypeId"+row+"\"/>"+
            "<input type=\"hidden\" class=\"input-text\"  name=\"stockTypeIds\" id=\"stockTypeId"+row+"\"/></tr>"
        );
        $("#tbody2").append($li);
        lay('.timeSpace').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
                ,type: 'datetime'
            });
        });

        if ($.validator) {
            $.validator.prototype.elements = function () {
                var validator = this,
                    rulesCache = {};

                // select all valid inputs inside the form (no submit or reset buttons)
                return $(this.currentForm)
                    .find("input, select, textarea")
                    .not(":submit, :reset, :image, [disabled]")
                    .not(this.settings.ignore)
                    .filter(function () {
                        if (!this.name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }
                        //注释这行代码
                        // select only the first element for each name, and only those with rules specified
                        //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
                        //    return false;
                        //}
                        rulesCache[this.name] = true;
                        return true;
                    });
            }
        }
    }

    function sub(id){
        var tab = document.getElementById("classTable") ;
        $("#"+id).remove();
        var row1 = tab.rows.length-1 ;
        for(var i=1;i<=row1;i++){
            tab.rows[i].cells[0].innerHTML=i;
        }
        //统计金额
        var table = document.getElementById("classTable");
        var total=0;
        for (var j = 1; j <= row; j++){
            console.log(j);
            var totalPrice= $("#totalPrice"+j).val();
            if (totalPrice == '' || totalPrice == undefined || totalPrice == null){
                console.log("------------------"+j);
            }else {
                console.log($("#totalPrice" + j).val());
                total = total + parseFloat($("#totalPrice" + j).val());
            }
        }
        console.log(total);

        //统计数量
        var total1=0;
        for (var j = 1; j <= row; j++){
            var stockNum= $("#stockNum"+j).val();
            if (stockNum == '' || stockNum == undefined || stockNum == null){

            }else {
                console.log($("#stockNum"+j).val());
                total1=total1+parseInt($("#stockNum"+j).val());
            }
        }
        console.log(total1);
        var $lable=$();
        $("#div").remove();
        var $lable1=$("<div id='div' style='display: inline-block;position: absolute;left: 85.3%;'>" +
            "<lable style='font-size: 10px;padding: 5px 3px;'>总数量:</lable><label style='font-size: 10px;padding: 5px 3px;'>"+total1+"</label>"+
            "<lable style='font-size: 10px;padding: 5px 3px;margin-left: 5px;'>总金额:</lable><label style='font-size: 10px;padding: 5px 3px;'>"+total+"</label></div>")
        $("#rediv").append($lable1);
    }