js数据结构变化 table动态列展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="TYMD">1231231</div> </body> </html> <script> let oneData = { "code": 200, "message": "操作成功", "data": { "flag": [{ "unit": "公斤(千克)", "productCode": "01.02.01.001.00003", "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂", "taxprice": "20", "mainNum": 350, "cName": "月结30天(30%电汇和70%半年电子银承)", "nmny": 7000, "nnum": "0~3000", "productName": "荧光粉", "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04" }, { "unit": "公斤(千克)", "productCode": "01.02.01.001.00003", "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂", "taxprice": "19", "mainNum": 350, "cName": "月结30天(30%电汇和70%半年电子银承)", "nmny": 6650, "nnum": "3000~7000", "productName": "荧光粉", "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04" }, { "unit": "个", "productCode": "03.03.20.001.0021", "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂", "taxprice": "29", "mainNum": 200, "cName": "月结30天(30%电汇和70%半年电子银承)", "nmny": 5800, "nnum": "0~5000", "productName": "020白色贴片", "productType": "E020UW45-40" }, { "unit": "个", "productCode": "03.03.20.001.0021", "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂", "taxprice": "15", "mainNum": 200, "cName": "月结30天(30%电汇和70%半年电子银承)", "nmny": 3000, "nnum": "5000~8000", "productName": "020白色贴片", "productType": "E020UW45-40" }, { "unit": "公斤(千克)", "productCode": "01.02.01.001.00003", "supplierDocName": "广州铜材厂有限公司", "taxprice": "20", "mainNum": 350, "nmny": 7000, "nnum": "0~3000", "productName": "荧光粉", "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04" }, { "unit": "公斤(千克)", "productCode": "01.02.01.001.00003", "supplierDocName": "广州铜材厂有限公司", "taxprice": "19", "mainNum": 350, "nmny": 6650, "nnum": "3000~7000", "productName": "荧光粉", "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04" }, { "unit": "个", "productCode": "03.03.20.001.0021", "supplierDocName": "广州铜材厂有限公司", "taxprice": "23", "mainNum": 200, "nmny": 4600, "nnum": "0~5000", "productName": "020白色贴片", "productType": "E020UW45-40" }, { "unit": "个", "productCode": "03.03.20.001.0021", "supplierDocName": "广州铜材厂有限公司", "taxprice": "15", "mainNum": 200, "nmny": 3000, "nnum": "5000~8000", "productName": "020白色贴片", "productType": "E020UW45-40" }] } } let twoData = oneData.data.flag; console.log(twoData); let PersonCollect = twoData.reduce((total, cur, index) => { let hasValue = total.findIndex(current => { return current.unit === cur.unit && current.productCode == cur.productCode && current.productName == cur.productName && current.productType == cur.productType && current.mainNum == cur.mainNum && current.nnum == cur.nnum }) hasValue === -1 && total.push(cur) // hasValue !== -1 && (total[hasValue].Expenses = floatObj.add(Number(total[hasValue].Expenses), Number(cur.Expenses))); return total }, []).map(item => { let dataOption = { unit: item.unit, productCode: item.productCode, productName: item.productName, productType: item.productType, mainNum: item.mainNum, nnum: item.nnum } return dataOption; }) console.log(PersonCollect); let ctList = []; let tyList = []; for (let i = 0; i < PersonCollect.length; i++) { const elementi = PersonCollect[i]; let list = { unit: elementi.unit, productCode: elementi.productCode, productName: elementi.productName, productType: elementi.productType, mainNum: elementi.mainNum, nnum: elementi.nnum, }; let index = 0; for (let j = 0; j < twoData.length; j++) { const elementj = twoData[j]; if ( elementi.unit == elementj.unit && elementi.productCode == elementj.productCode && elementi.productName == elementj.productName && elementi.productType == elementj.productType && elementi.mainNum == elementj.mainNum && elementi.nnum == elementj.nnum ) { index++; // list[0][`taxprice${index}`] = elementj.taxprice ? elementj.taxprice : elementj.taxprice; // list[0][`nmny${index}`] = elementj.nmny ? elementj.nmny : elementj.nmny; // list[0][`supplierDocName${index}`] = elementj.supplierDocName ? elementj.supplierDocName : elementj.supplierDocName; // list[0][`cName${index}`] = elementj.cName ? elementj.cName : elementj.cName; list[`taxprice${elementj.supplierDocName}`] = elementj.taxprice ? elementj.taxprice : elementj.taxprice; list[`nmny${elementj.supplierDocName}`] = elementj.nmny ? elementj.nmny : elementj.nmny; list[`${elementj.supplierDocName}`] = elementj.supplierDocName ? elementj.supplierDocName : elementj.supplierDocName; list[`cName${elementj.supplierDocName}`] = elementj.cName ? elementj.cName : elementj.cName; tyList.push(elementj.supplierDocName); } }; ctList.push(list); }; tyList = [...new Set(tyList)]; console.log(tyList); // tyList = ["武汉钢铁江北集团有限公司精密带钢厂", "广州铜材厂有限公司"]; console.log(ctList); var tableTitle = ''; tyList.forEach((item) => { tableTitle = tableTitle + '<col width="100"></col>' }); console.log(tableTitle); let tablebody = ""; let MRow = ""; let tablebottom = ""; let rowtable = ""; tyList.forEach((item, index) => { MRow = MRow + '<td colspan="3" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `${item}` + '</span></td>' }); MRow += '</tr>' + '<tr>'; tyList.forEach((item, index) => { rowtable = rowtable + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `含税单价` + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `含税总价` + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `付款协议` + '</span></td>' }); rowtable += '</tr>'; tablebody = '<tr>' + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `物料编码` + '</span></td>' + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `物料名称` + '</span></td>' + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:140px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `规格型号` + '</span></td>' + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `单位` + '</span></td>' + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `数量` + '</span></td>' + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `阶梯数量` + '</span></td>' + MRow + rowtable; console.log(ctList); for (let i = 0; i < ctList.length; i++) { const element = ctList[i]; tablebottom += '<tr>'; tablebottom += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["productCode"] ? element["productCode"] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["productName"] ? element["productName"] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:140px;padding: 0 5px 0 5px;"><span>' + (element["productType"] ? element["productType"] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["unit"] ? element["unit"] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["mainNum"] ? element["mainNum"] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["nnum"] ? element["nnum"] : '') + '</span></td>' for (let j = 0; j < tyList.length; j++) { const object = tyList[j]; tablebottom += // '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`${object}`] ? element[`${object}`] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`taxprice${object}`] ? element[`taxprice${object}`] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`nmny${object}`] ? element[`nmny${object}`] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`cName${object}`] ? element[`cName${object}`] : '') + '</span></td>' } tablebottom += '<tr>'; } var tablediv = '<table style ="border-collapse:collapse;margin: 1px;" ><colgroup><col width="90"></col><col width="90"></col><col width="140"></col><col width="90"></col><col width="90"></col><col width="90"></col>' + tableTitle + '</colgroup><thead><tr>' + '</tr></thead><tbody>' + tablebody + tablebottom + '</tbody></table>'; var htmlTable = '<div id="testdivid" style="display: flex;justify-content: center;margin: 0 auto;margin: 0;padding: 0;"><div id="divTTable" >' + tablediv + '</div></div>'; TYMD.innerHTML = htmlTable; </script>
viewModel.on("customInit", function(data) { // 211211详情--页面初始化 viewModel.on("afterLoadData", function() { debugger; // let id = "XJ000327"; let id = viewModel.getParams().id ? viewModel.getParams().id : ""; let proxy = viewModel.setProxy({ ensure: { url: "/priceCompaData/priceCompaDetail", method: "POST", }, }); let param = { id: id, }; proxy.ensure(param, function(error, result) { if (error) { cb.utils.alert(error.message, "error"); viewModel.execute("refresh"); } else { debugger; let twoData = result.flag; console.log(twoData); let PersonCollect = twoData .reduce((total, cur, index) => { let hasValue = total.findIndex((current) => { return ( current.unit === cur.unit && current.productCode == cur.productCode && current.productName == cur.productName && current.productType == cur.productType && current.mainNum == cur.mainNum && current.nnum == cur.nnum ); }); hasValue === -1 && total.push(cur); return total; }, []) .map((item) => { let dataOption = { unit: item.unit, productCode: item.productCode, productName: item.productName, productType: item.productType, mainNum: item.mainNum, nnum: item.nnum, }; return dataOption; }); console.log(PersonCollect); let ctList = []; let tyList = []; for (let i = 0; i < PersonCollect.length; i++) { const elementi = PersonCollect[i]; let list = { unit: elementi.unit, productCode: elementi.productCode, productName: elementi.productName, productType: elementi.productType, mainNum: elementi.mainNum, nnum: elementi.nnum, }; let index = 0; for (let j = 0; j < twoData.length; j++) { const elementj = twoData[j]; if ( elementi.unit == elementj.unit && elementi.productCode == elementj.productCode && elementi.productName == elementj.productName && elementi.productType == elementj.productType && elementi.mainNum == elementj.mainNum && elementi.nnum == elementj.nnum ) { index++; list[`taxprice${elementj.supplierDocName}`] = elementj.taxprice ? elementj.taxprice : elementj.taxprice; list[`nmny${elementj.supplierDocName}`] = elementj.nmny ? elementj.nmny : elementj.nmny; list[`${elementj.supplierDocName}`] = elementj.supplierDocName ? elementj.supplierDocName : elementj.supplierDocName; list[`cName${elementj.supplierDocName}`] = elementj.cName ? elementj.cName : elementj.cName; tyList.push(elementj.supplierDocName); } } ctList.push(list); } tyList = [...new Set(tyList)]; console.log(tyList); console.log(ctList); var tableTitle = ""; tyList.forEach((item) => { tableTitle = tableTitle + '<col width="90"></col>'; }); console.log(tableTitle); let tablebody = ""; let MRow = ""; let tablebottom = ""; let rowtable = ""; tyList.forEach((item, index) => { MRow = MRow + '<td colspan="3" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `${item}` + "</span></td>"; }); MRow += "</tr>" + "<tr>"; tyList.forEach((item, index) => { rowtable = rowtable + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `含税单价` + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `含税总价` + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `付款协议` + "</span></td>"; }); rowtable += "</tr>"; tablebody = "<tr>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `物料编码` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `物料名称` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `规格型号` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:80px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `单位` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:60px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `数量` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `阶梯数量` + "</span></td>" + MRow + rowtable; console.log(ctList); for (let i = 0; i < ctList.length; i++) { const element = ctList[i]; tablebottom += "<tr>"; tablebottom += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element["productCode"] ? element["productCode"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element["productName"] ? element["productName"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;"><span>' + (element["productType"] ? element["productType"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:80px;padding: 0 2px 0 2px;"><span>' + (element["unit"] ? element["unit"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:60px;padding: 0 2px 0 2px;"><span>' + (element["mainNum"] ? element["mainNum"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element["nnum"] ? element["nnum"] : "") + "</span></td>"; for (let j = 0; j < tyList.length; j++) { const object = tyList[j]; tablebottom += // '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element[`${object}`] ? element[`${object}`] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;"><span>' + (element[`taxprice${object}`] ? element[`taxprice${object}`] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;"><span>' + (element[`nmny${object}`] ? element[`nmny${object}`] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element[`cName${object}`] ? element[`cName${object}`] : "") + "</span></td>"; } tablebottom += "<tr>"; } var tablediv = '<table style ="border-collapse:collapse;margin: 1px;" ><colgroup><col width="90"></col><col width="90"></col><col width="130"></col><col width="80"></col><col width="60"></col><col width="90"></col>' + tableTitle + "</colgroup><thead><tr>" + "</tr></thead><tbody>" + tablebody + tablebottom + "</tbody></table>"; var htmlTable = '<div id="testdivid" style="display: flex;justify-content: center;margin: 0 auto;margin: 0;padding: 0;"><div id="divTTable" >' + tablediv + "</div></div>"; // document.getElementById("yxyweb-support-container").innerHTML = ""; setTimeout(() => { // document.getElementById("yxyweb-support-container").innerHTML = htmlTable; document.getElementsByClassName( "mdf-modal-body wui-modal-body" )[0].innerHTML = htmlTable; }, 1000); } }); }); });
viewModel.on("customInit", function(data) { // 211211详情--页面初始化 viewModel.on("afterLoadData", function() { debugger; // let id = "XJ000327"; let id = viewModel.getParams().id ? viewModel.getParams().id : ""; let proxy = viewModel.setProxy({ ensure: { url: "/priceCompaData/priceCompaDetail", method: "POST", }, }); let param = { id: id, }; proxy.ensure(param, function(error, result) { if (error) { cb.utils.alert(error.message, "error"); viewModel.execute("refresh"); } else { debugger; let twoData = result.flag; console.log(twoData); let PersonCollect = twoData .reduce((total, cur, index) => { let hasValue = total.findIndex((current) => { return ( current.unit === cur.unit && current.productCode == cur.productCode && current.productName == cur.productName && current.productType == cur.productType && current.mainNum == cur.mainNum && current.nnum == cur.nnum ); }); hasValue === -1 && total.push(cur); return total; }, []) .map((item) => { let dataOption = { unit: item.unit, productCode: item.productCode, productName: item.productName, productType: item.productType, mainNum: item.mainNum, nnum: item.nnum, }; return dataOption; }); console.log(PersonCollect); let ctList = []; let tyList = []; for (let i = 0; i < PersonCollect.length; i++) { const elementi = PersonCollect[i]; let list = { unit: elementi.unit, productCode: elementi.productCode, productName: elementi.productName, productType: elementi.productType, mainNum: elementi.mainNum, nnum: elementi.nnum, }; let index = 0; for (let j = 0; j < twoData.length; j++) { const elementj = twoData[j]; if ( elementi.unit == elementj.unit && elementi.productCode == elementj.productCode && elementi.productName == elementj.productName && elementi.productType == elementj.productType && elementi.mainNum == elementj.mainNum && elementi.nnum == elementj.nnum ) { index++; list[`taxprice${elementj.supplierDocName}`] = elementj.taxprice ? elementj.taxprice : elementj.taxprice; list[`nmny${elementj.supplierDocName}`] = elementj.nmny ? elementj.nmny : elementj.nmny; list[`${elementj.supplierDocName}`] = elementj.supplierDocName ? elementj.supplierDocName : elementj.supplierDocName; list[`cName${elementj.supplierDocName}`] = elementj.cName ? elementj.cName : elementj.cName; tyList.push(elementj.supplierDocName); } } ctList.push(list); } tyList = [...new Set(tyList)]; console.log(tyList); console.log(ctList); var tableTitle = ""; tyList.forEach((item) => { tableTitle = tableTitle + '<col width="75"></col>'; }); console.log(tableTitle); let tablebody = ""; let MRow = ""; let tablebottom = ""; let rowtable = ""; tyList.forEach((item, index) => { MRow = MRow + '<td colspan="3" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:85px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `${item}` + "</span></td>"; }); MRow += "</tr>" + "<tr>"; tyList.forEach((item, index) => { rowtable = rowtable + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:75px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `含税单价` + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:75px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `含税总价` + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:140px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `付款协议` + "</span></td>"; }); rowtable += "</tr>"; tablebody = "<tr>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `物料编码` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `物料名称` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `规格型号` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `单位` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:60px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `数量` + "</span></td>" + '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' + `阶梯数量` + "</span></td>" + MRow + rowtable; console.log(ctList); for (let i = 0; i < ctList.length; i++) { const element = ctList[i]; tablebottom += "<tr>"; tablebottom += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element["productCode"] ? element["productCode"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element["productName"] ? element["productName"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;"><span>' + (element["productType"] ? element["productType"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;text-align: center;"><span>' + (element["unit"] ? element["unit"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:60px;padding: 0 2px 0 2px;text-align: center;"><span>' + (element["mainNum"] ? element["mainNum"] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;text-align: center;"><span>' + (element["nnum"] ? element["nnum"] : "") + "</span></td>"; for (let j = 0; j < tyList.length; j++) { const object = tyList[j]; tablebottom += // '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element[`${object}`] ? element[`${object}`] : '') + '</span></td>' + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;text-align: center;"><span>' + (element[`taxprice${object}`] ? element[`taxprice${object}`] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;text-align: center;"><span>' + (element[`nmny${object}`] ? element[`nmny${object}`] : "") + "</span></td>" + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' + (element[`cName${object}`] ? element[`cName${object}`] : "") + "</span></td>"; } tablebottom += "<tr>"; } var tablediv = '<table style ="border-collapse:collapse;margin: 1px; flex-shrink: 0;" ><colgroup><col width="90"></col><col width="90"></col><col width="130"></col><col width="70"></col><col width="60"></col><col width="90"></col>' + tableTitle + "</colgroup><thead><tr>" + "</tr></thead><tbody>" + tablebody + tablebottom + "</tbody></table>"; var htmlTable = '<div id="testdivid" style="display: flex;justify-content: center;margin: 0 auto;margin: 0;padding: 0;overflow-x:scroll;overflow-y:scroll;"><div id="divTTable" style="display:flex;" >' + tablediv + "</div></div>"; // document.getElementById("yxyweb-support-container").innerHTML = ""; setTimeout(() => { // document.getElementById("yxyweb-support-container").innerHTML = htmlTable; document.getElementsByClassName( "mdf-modal-body wui-modal-body" )[0].innerHTML = htmlTable; }, 1000); } }); }); });