Javascript “计算”复选框启用的行并显示在另一个表格中

我有两张表，分别是表1和表2表1中充满了来自服务的数据。在表1中，我有数量、价格和复选框等列。在复选框列中，我将复选框作为值。数量和价格以数字作为值 在表2中我有一列名为数量和价格

表1和表2的图片

现在，假设我单击表1中第1、2、4行的复选框。因此，如果您在表1中选择数量列，则应添加第1、2、4行中的所有数量值，并将其作为单个值显示在表2的数量列中。价格列也是如此。（示例6,4,2是第1,2,4行的qty列的值，因此添加（6+4+2）并在表2中qty列的第一行显示总计。）

我试着做了两天，但没有找到解决办法。我知道这是一个非常困难的问题。 如果可以的话，请帮助我

---

STACKBLITZ：

在组件级别添加一个变量，该变量将保存总计数

totalCount: any;

在

ngOnInit

事件中初始化它

this.totalCount = {qty:0,value:0};

在复选框

onChange

上，事件调用下面的函数，该函数将根据选中状态添加/删除

getTotal(event,item) {
    if (event.target.checked) {
      this.totalCount.qty =  this.totalCount.qty + item.qty;
      this.totalCount.value =  this.totalCount.value + item.value;
    } else {
      this.totalCount.qty =  this.totalCount.qty - item.qty;
      this.totalCount.value =  this.totalCount.value - item.value;
    }
}

像这样显示值

<tr *ngIf="!(totalCount.qty == 0 || totalCount.value == 0)">
    <td>1</td>
    <td>{{totalCount.qty}}</td>
    <td>{{totalCount.value}}</td>
</tr>

1.
{{totalCount.qty}
{{totalCount.value}

工作人员突击检查：-

---

制作一个可运行的代码段我已经附加了一个stackblitz。@jQueryHTMLCSSHOW您的HTML。我已经在stackblitz中显示了我的HTML。2个表tootally。在第二个表中只有列。您需要使用jquery/js执行此操作吗？嘿，谢谢，我正在尝试在下面保留一个按钮。因此，第二个表中的更改只显示一个点击按钮后。当我尝试时，我无法像使用onchange之前那样访问列表和事件值。我还制作了一个onclick-in按钮，在这一点上，我调用了您使用此按钮完成的getTotal（），getTotal（）在按钮内部，onclick和那也不起作用。有什么想法吗？它不起作用，试着理解逻辑。onChange是针对每个项目的，它如何在按钮单击上起作用。如果你想在按钮单击上起作用，你需要在getTotal函数上更改逻辑如果我使用按钮单击，我将如何访问$event和列表值如果我要把那个按钮放在桌子外面？在那种情况下你不能访问事件。