首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何捕获表格的td值,并在angular 7中单击编辑按钮时将其输入到输入字段中

在Angular 7中捕获表格的td值,并在单击编辑按钮时将其输入到输入字段中,可以按照以下步骤进行:

  1. 首先,在组件的HTML模板中创建一个表格,其中每个单元格都用td元素表示,并为每个单元格添加一个编辑按钮。例如:
代码语言:txt
复制
<table>
  <tr>
    <td>{{ value1 }}</td>
    <td>{{ value2 }}</td>
    <td><button (click)="editCell(1)">编辑</button></td>
  </tr>
  <tr>
    <td>{{ value3 }}</td>
    <td>{{ value4 }}</td>
    <td><button (click)="editCell(2)">编辑</button></td>
  </tr>
  <!-- 其他行 -->
</table>
  1. 在组件的TypeScript文件中,定义表格中每个单元格的值,并创建一个变量来存储当前编辑的单元格索引。
代码语言:txt
复制
export class YourComponent {
  value1: string = 'Value 1';
  value2: string = 'Value 2';
  value3: string = 'Value 3';
  value4: string = 'Value 4';

  editingCellIndex: number = -1;

  editCell(index: number): void {
    this.editingCellIndex = index;
  }
}
  1. 修改HTML模板,根据当前编辑的单元格索引显示输入字段或普通文本。
代码语言:txt
复制
<table>
  <tr>
    <td>
      <ng-container *ngIf="editingCellIndex !== 1; else editCell1">
        {{ value1 }}
      </ng-container>
      <ng-template #editCell1>
        <input type="text" [(ngModel)]="value1">
      </ng-template>
    </td>
    <td>
      <ng-container *ngIf="editingCellIndex !== 2; else editCell2">
        {{ value2 }}
      </ng-container>
      <ng-template #editCell2>
        <input type="text" [(ngModel)]="value2">
      </ng-template>
    </td>
    <td><button (click)="editCell(1)">编辑</button></td>
  </tr>
  <tr>
    <td>
      <ng-container *ngIf="editingCellIndex !== 3; else editCell3">
        {{ value3 }}
      </ng-container>
      <ng-template #editCell3>
        <input type="text" [(ngModel)]="value3">
      </ng-template>
    </td>
    <td>
      <ng-container *ngIf="editingCellIndex !== 4; else editCell4">
        {{ value4 }}
      </ng-container>
      <ng-template #editCell4>
        <input type="text" [(ngModel)]="value4">
      </ng-template>
    </td>
    <td><button (click)="editCell(2)">编辑</button></td>
  </tr>
  <!-- 其他行 -->
</table>

通过上述步骤,你可以在Angular 7中捕获表格的td值,并在单击编辑按钮时将其输入到输入字段中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券