html 从表中选择多行并添加值输入列

brgchamk 于 2023-04-18 发布在其他

关注(0)|答案(1)|浏览(135)

我正试图从一个表中选择几行并将值相加这是我在html中的表格。

<div class="container-fluid">
        <div class="table-responsive">

            <table class="table table-striped" id="table" style="margin-top: 1%;">
                <thead>
                    <tr>
                        <th scope="col">Artículo</th>
                        <th scope="col">Cantidad</th>
                        <th scope="col">Recogida</th>

                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of articulos; let i=index">
                        <td>{{item.articulo}}</td>
                        <td>{{item.cantidad}}</td>
                        <td>{{item.recogida}}</td>
                    </tr>
                </tbody>
            </table>
            <input type="button" name="OK" class="ok" value="OK"/>

        </div>
    </div>

数据来自我的ts，如下所示：

`export class EntryOrderLinesComponent implements OnInit {

  articulos = [
    {
      "articulo": "385/65X22.5 HANKOOK AH51 160K (3003836)",
      "cantidad": "94",
      "recogida": "0",
    },
    {
      "articulo": "385/65X22.5 HANKOOK TH31 164K (3003309)",
      "cantidad": "60",
      "recogida": "0",
    },

  ]

  datosEmpresaTaller: Observable<EmpresaTaller>;

  constructor(private datosService: DatosService) { }

  ngOnInit(): void {
    this.datosEmpresaTaller = this.datosService.getEmpresaTaller();
  }

 }`

我需要能够从表中选择多行，并在选择行时添加数量列，例如，94 + 60，并显示结果。
谢谢你
我已经尝试过使用行上的单击事件来执行此操作，但无法解决此问题。

Html

来源：https://stackoverflow.com/questions/75093929/select-multiple-rows-from-a-table-and-add-value-inputs-column

1条答案

按热度按时间

aurhwmvo1#

好吧，消磨一些时间;这是我为这个设计的一个基本版本。
输入你的点击事件，我猜，会有一些东西显示它被选中了：

<tr *ngFor="let item of articulos; let i=index" 
    (click)="onRowClicked(item)"
    [class.selected]="isRowSelected(item)">
    ...
</tr>

.selected { background-color: blackasmyheart; }

使用选定项目的基本列表（假设您没有使用selected标志扩展articulos项目）：

private _selectedItems: any[] = [];

public isRowSelected(item: any): boolean {
    return this._selectedItems.includes(item);
}

public onRowClicked(item: any): void {
    if (this.isRowSelected(item)) this._selectedItems.remove(item);
    else this._selectedItems.push(item)
}

瞧，你现在有了一个列表，里面有你所选择的所有项目，可以按照你的意愿来处理。
编辑：
哦，对了，JS/TS，我忘了--抓取项的索引，把它从数组中拼接出来。

const idx = this._selectedItems.indexOf(item);
this._selectedItems.splice(idx, 1);

赞(0）回复(0）举报 2023-04-18

我来回答

html 从表中选择多行并添加值输入列

1条答案

相关问题

热门标签

最新问答