js获取追加行的行数和<td>里面的值

本文介绍了一个使用JavaScript动态操作HTML表格的例子,包括表格的创建、追加行及获取特定单元格的值等内容。

Html代码:

<table id="show1" style=" width151px;height63px;border2px;"></table>

Js代码:对表格的追加

if($("#show1").html("")!=null){

    $("#show1").html("");

   }

    for(var i=0;i<check_val.length;i++){

     $("#show1").append("<tr><td name=\"quzhi\">"+check_val[i]+"</td><td><input name="+check_val[i]+" type=\"button\" value=\"删除\" onclick=\"del('"+check_val[i]+"','this')\"></td></tr>");

    }

   $("#show1").append("<tr><td></td><td><input name=\"a1\" type=\"button\" value=\"生成文件\" onclick=\"a()\"></td></tr>");

获取行数和td的值: 

function a(){

 alert("sd");

 var input = $("input[name=a1]");

 var tr = input.parent().parent().siblings();

 var trlenght = tr.length;//行数

 alert(tr[1]);

 var td = [];

    $("#show1").find("td").each(function(i) {

                var t = $(this).text();

                if(t!=""){

                 alert(t);

                 td.push(t);//将有值得td的值放在数组td

                }

            });

alert("tdshuzhu:"+td);

<template> <div class="table-container"> <table class="dynamic-table"> <thead> <tr> <th rowspan="2">Factory</th> <th rowspan="2">Year</th> <template v-for="year in yearList" :key="year"> <th colspan="4" class="year-subheader">{{ year }}</th> </template> </tr> <tr> <template v-for="year in yearList" :key="'subheader-' + year"> <th>Category</th> <th>双数%</th> <th>总双数</th> <th>ASP</th> </template> </tr> </thead> <tbody> <template v-for="(factory, factoryIndex) in pageList" :key="factory.fact" > <!-- 按固定顺序分组渲染 --> <template v-for="yearType in fixedYearOrder" :key="yearType"> <!-- 获取当前年份类型的所有 --> <template v-if="getRowsByYearType(factory.fcList, yearType).length > 0" > <tr v-for="(fc, fcIndex) in getRowsByYearType( factory.fcList, yearType )" :key="fc" > <!-- 工厂名称列(只在工厂的第一显示) --> <td v-if="isFirstRowOfFactory(factoryIndex, yearType, fcIndex)" :rowspan="getFactoryRowspan(factory.fcList)" class="factory-cell" > {{ factory.fact }} </td> <!-- Year列(只在年份类型组的第一显示) --> <td v-if="fcIndex == 0" :rowspan="getRowspan(factory.fcList, yearType)" class="yy-cell" > {{ yearType }} </td> <!-- 动态年份数据 --> <template v-for="year in yearList" :key="year"> <td>{{ fc }}</td> <!-- 双数%列 --> <td>{{ getPercentage(factory, fc, year) }}</td> <td>{{ getTotalQty(factory.infoList, fc, year) }}</td> <td>{{ getFob(factory.infoList, fc, year) }}</td> </template> </tr> </template> </template> <!-- 总计 - 修复工厂年份列合并问题 --> <tr class="summary-row"> <!-- Year列显示"总计" - 关键修复:确保不重复显示 --> <td class="summary-cell">总计</td> <!-- 动态年份数据 --> <template v-for="year in yearList" :key="year"> <td></td> <!-- Category为空 --> <td class="percentage-cell"> {{ getTotalPercentage(factory, year) }} </td> <!-- 双数%总 --> <td>{{ getFactoryYearTotal(factory, year) }}</td> <!-- 总双数计总 --> <td>{{ getWeightedASP(factory, year) }}</td> <!-- 加权平均ASP --> </template> </tr> </template> </tbody> </table> </div> </template> <script setup> import { ref, onMounted, computed } from "vue"; import { financeClassifyByYearList } from "@/api/planning/page"; const pageList = ref([]); const yearList = ref([]); const fixedYearOrder = ["JD", "NSW", "Golf"]; // 固定顺序 // 计算每个工厂每个年份的总双数之 const factoryYearSums = computed(() => { const sums = {}; pageList.value.forEach((factory) => { const factoryName = factory.fact; sums[factoryName] = {}; // 初始化每个年份的总为0 yearList.value.forEach((year) => { sums[factoryName][year] = 0; }); // 累加该工厂每个年份的总双数 if (factory.infoList) { factory.infoList.forEach((item) => { const year = String(item.year); if (yearList.value.includes(year) && item.totalQty) { sums[factoryName][year] += parseFloat(item.totalQty) || 0; } }); } }); return sums; }); // 计算每个工厂每个年份的总金额(用于加权平均ASP) const factoryYearAmounts = computed(() => { const amounts = {}; pageList.value.forEach((factory) => { const factoryName = factory.fact; amounts[factoryName] = {}; // 初始化每个年份的总金额为0 yearList.value.forEach((year) => { amounts[factoryName][year] = 0; }); // 累加该工厂每个年份的总金额 if (factory.infoList) { factory.infoList.forEach((item) => { const year = String(item.year); if (yearList.value.includes(year) && item.totalQty && item.fob) { const qty = parseFloat(item.totalQty) || 0; const fob = parseFloat(item.fob) || 0; amounts[factoryName][year] += qty * fob; } }); } }); return amounts; }); // 获取YY分类 function getYYCategory(fc) { const jdCategories = [ "JD 聯名款", "JD 成人鞋", "JD大童", "JD 中童", "JD小童", ]; const nswCategories = [ "NSW 聯名款", "NSW联名款", "NSW 联名款", "NSW 普通款", "NSW FUEL 聯名款", "NSW普通款", "SLT/SP/GEL/FUEL 快速訂單", ]; const golfCategories = ["GOLF", "JD GOLF 高尔夫", "GOLF "]; if (jdCategories.includes(fc)) return "JD"; if (nswCategories.includes(fc)) return "NSW"; if (golfCategories.includes(fc)) return "Golf"; return "其他"; } // 获取属于特定年份类型的 function getRowsByYearType(fcList, yearType) { if (!fcList) return []; return fcList.filter((fc) => getYYCategory(fc) == yearType); } // 获取特定年份类型的行数(用于rowspan) function getRowspan(fcList, yearType) { return getRowsByYearType(fcList, yearType).length; } // 获取工厂的总行数(用于合并工厂列) function getFactoryRowspan(fcList) { let totalRows = 0; fixedYearOrder.forEach((yearType) => { totalRows += getRowsByYearType(fcList, yearType).length; }); // 加上总计 return totalRows + 1; } // 判断是否是工厂的第一 function isFirstRowOfFactory(factoryIndex, yearType, fcIndex) { // 当前工厂的第一个年份类型的第一 return yearType == fixedYearOrder[0] && fcIndex == 0; } // 关键修复:判断是否应该显示Year列 function shouldShowYearCell(factoryIndex) { // 只在工厂的第一个年份类型的第一显示 return factoryIndex == 0; } // 获取总双数 function getTotalQty(infoList, fc, year) { if (!infoList) return ""; const item = infoList.find( (item) => item.financeClassify == fc && String(item.year) == year ); return item ? item.totalQty : ""; } // 获取双数百分比 function getPercentage(factory, fc, year) { const factoryName = factory.fact; const infoList = factory.infoList; if (!infoList) return "0.00%"; // 获取前行的总双数 const item = infoList.find( (item) => item.financeClassify == fc && String(item.year) == year ); if (!item || !item.totalQty) return "0.00%"; // 获取当前工厂当前年份的总双数之 const factoryYearTotal = factoryYearSums.value[factoryName]?.[year] || 0; // 防止除以0 if (factoryYearTotal == 0) return "0.00%"; // 计算百分比 const percentage = (parseFloat(item.totalQty) / factoryYearTotal) * 100; // 格式化为百分比字符串(保留两位小数) return percentage.toFixed(2) + "%"; } // 获取所有类别双数%的总 function getTotalPercentage(factory, year) { const factoryName = factory.fact; const infoList = factory.infoList; if (!infoList) return "0.00%"; let totalPercentage = 0; // 累加所有类别的百分比 infoList.forEach((item) => { if (String(item.year) === year && item.totalQty) { const factoryYearTotal = factoryYearSums.value[factoryName]?.[year] || 0; if (factoryYearTotal > 0) { const percentage = (parseFloat(item.totalQty) / factoryYearTotal) * 100; totalPercentage += percentage; } } }); // 格式化为百分比字符串(保留两位小数) return totalPercentage.toFixed(2) + "%"; } // 获取FOB function getFob(infoList, fc, year) { if (!infoList) return ""; const item = infoList.find( (item) => item.financeClassify == fc && String(item.year) == year ); return item ? item.fob : ""; } // 获取工厂年份总双数 function getFactoryYearTotal(factory, year) { const factoryName = factory.fact; return factoryYearSums.value[factoryName]?.[year] || 0; } // 获取加权平均ASP function getWeightedASP(factory, year) { const factoryName = factory.fact; const totalQty = factoryYearSums.value[factoryName]?.[year] || 0; const totalAmount = factoryYearAmounts.value[factoryName]?.[year] || 0; if (totalQty == 0) return "0.00"; // 计算加权平均ASP:总金额 / 总双数 const asp = totalAmount / totalQty; return asp.toFixed(2); } // 获取数据 function getList() { financeClassifyByYearList().then((response) => { if (response.code == 200) { pageList.value = response.data; if (pageList.value.length > 0) { yearList.value = pageList.value[0].fyList || []; } } }); } onMounted(() => { getList(); }); </script> <style scoped> .table-container { overflow-x: auto; margin: 20px 0; } .dynamic-table { width: 100%; border-collapse: collapse; font-size: 14px; } .dynamic-table th, .dynamic-table td { border: 1px solid #e0e0e0; padding: 8px 12px; text-align: center; min-width: 80px; } .dynamic-table thead th { background-color: #f5f7fa; font-weight: 600; } .year-header { background-color: #e1f0fa; font-size: 16px; font-weight: bold; } .year-subheader { background-color: #d1e7f7; font-weight: bold; } .factory-cell { background-color: #f0f9eb; font-weight: bold; } .yy-cell { background-color: #fdf6ec; font-weight: bold; } .summary-row { background-color: #e8f4ff; font-weight: bold; } .summary-cell { background-color: #d1e7f7; font-weight: bold; } /* 确保合并单元格的边框样式一致 */ .dynamic-table tr:first-child .factory-cell { border-top: 1px solid #e0e0e0; } </style> 分析以上代码,目前我需要在该列表的后面追加一块Factory为SZG的列表,用于展示三个工厂列表的汇总,首先该列表的Factory列为SZG,样式与其他工厂一样,Year列的其他工厂一样为JD,NSW,Golf;动态列的数据源于三个工厂对象的infoList集合中的每一条数据,比如当前动态列位于2025年,那么就每个工厂对象的infoList集合中year为2025的所有数据,根据financeClassify分组统计totalQty,然后再根据Year列Category列的对应关系,把总totalQty填充到对应的总双数上,关于financeClassify分组的说明,NSW 聯名款",“NSW联名款”, "NSW 联名款“都表示NSW联名款这一分组即可,"NSW普通款""NSW 普通款"表示为NSW普通款这一分组即可
最新发布
08-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值