Javascript 如何隐藏表格非活动编辑行的按钮

我有一个可内联编辑的表格，当我点击特定行的编辑按钮时，我想隐藏所有其他行的“编辑”和“删除”按钮。我尝试使用当前索引，但它对我无效。当我点击

addNew

按钮时也是如此

<a (click)="addNew()" class="mb-1 ml-1">Add New</a>
<table class="row-border table-bordered-no-confilct border-1 table">
  <thead>
    <tr>
      <th *ngFor="let head of headers">
        {{ head.name }} <span class="text-danger" *ngIf="head.required">*</span>
      </th>
    </tr>
  </thead>

  <tr *ngFor="let tableData of data; let i = index">
    <td>
     
       <div *ngIf="i">
            <i
            class="ace-icon fa fa-pencil-square-o bigger-150 text-success"
            data-toggle="tooltip"
            title="Edit"
            *ngIf="!tableData.isEditable"
            (click)="onEdit(tableData)"
          ></i>
          <i
            class="ace-icon fa fa-trash-o bigger text-danger ml-1"
            data-toggle="tooltip"
            title="Delete"
            *ngIf="!tableData.isEditable"
            (click)="onDelete(tableData)"
          ></i>
       </div>
      
        <i
        class="ace-icon fa fa-floppy-o bigger-150 text-success"
        data-toggle="tooltip"
        title="Save"
        *ngIf="tableData.isEditable"
        (click)="onSave(tableData)"
      ></i>
      <i
        class="ace-icon fa fa-times bigger-150 text-danger ml-1"
        data-toggle="tooltip"
        title="Cancel"
        *ngIf="tableData.isEditable"
        (click)="cancel(tableData, i)"
      ></i>

     
    </td>
    <td>{{ i + 1 }}</td>
    <ng-container *ngIf="tableData.isEditable; else viewable">
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>
            <input
              *ngIf="
                head.dataType === 'text' ||
                head.dataType === 'number' ||
                head.dataType === 'checkbox'
              "
              [type]="head.dataType"
              [(ngModel)]="tableData[head.mappedProperty]"
              [checked]="tableData[head.mappedProperty]"
            />
          </td>
        </ng-container>
      </ng-container>
    </ng-container>

    <ng-template #viewable>
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>{{ tableData[head.mappedProperty] }}</td>
        </ng-container>
      </ng-container>
    </ng-template>
  </tr>
</table>

---

您好，您只需使用*ngIf并在数据数组中添加属性“buttonStatus”即可，也可以使用IsEditable属性
下面是我的示例代码，它与您的非常相似->

<table class="style">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>email</th>
        <th></th>
    </tr>
    <tr *ngFor="let item of row; let i = index">
        <td><input type="text" ></td>
        <td><input type="text" ></td>
        <td><input type="text"></td>
        <td *ngIf="item.buttonStatus==true"> <button (click) = "deleteRow(i)"><i class="fa fa-trash"></i></button>
            <button (click)="editTable(i)">Edit</button>
            <button (click)="editDone()">Done</button>
        </td>
    </tr>
</table>

身份证件
名称
电子邮件
编辑
多恩

TS:

 row = [
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
},
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
},
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
}
];

editTable(x) {
//Setting Only One row's Buttons Active
for(let  i=0;i< this.row.length;i++){
  console.log(x);
  if(i==x)
  { 
    this.row[i].buttonStatus=true;
  }
  else
  {
      this.row[i].buttonStatus=false;
  }
}
// DO your Edit DATA Code here
//{
//}
}
editDone(){
  //Setting All Button Active
  for (let i = 0; i < this.row.length; i++) {
   this.row[i].buttonStatus = true;
  }
}

行=[
{
id:“”，
姓名：“，
电邮：“，
按钮状态：正确
},
{
id:“”，
姓名：“，
电邮：“，
按钮状态：正确
},
{
id:“”，
姓名：“，
电邮：“，
按钮状态：正确
}
];
编辑表（x）{
//仅设置一行的按钮处于活动状态
for（设i=0；i

注意：请检查StackBlitz中的代码：

---

如果您仍然需要帮助，请留下评论。

为每个tableData元素引入一个新属性，例如

shouldShowBtns

，并在tableData中相应地设置该值，并使用

[hidden]=“！shouldShowBtns

属性

[hidden]

属性可以添加到任何HTML元素

 row = [
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
},
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
},
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
}
];

editTable(x) {
//Setting Only One row's Buttons Active
for(let  i=0;i< this.row.length;i++){
  console.log(x);
  if(i==x)
  { 
    this.row[i].buttonStatus=true;
  }
  else
  {
      this.row[i].buttonStatus=false;
  }
}
// DO your Edit DATA Code here
//{
//}
}
editDone(){
  //Setting All Button Active
  for (let i = 0; i < this.row.length; i++) {
   this.row[i].buttonStatus = true;
  }
}