Linked Questions

Popular Questions

I'm trying to build a dynamic table in Angular with add, edit, delete functionality. Both my edit/delete buttons exist as their own column on every single one of the table rows. The edit button (onclick) is designed to make each of the 3 text data fields (in the same row as the edit button itself) turn into input fields whose user-entered text can then be saved.

<table id="thetable" align="center">
<tr>
  <th>Application ID</th>
  <th>Description</th>
  <th>API Key</th>
  <th>EDIT/DELETE</th>
</tr>
<tr id="newtablerow" ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
  <td id="tablevalues" *ngFor="let col of columns">
    <span id="columnText" ng-init="getRowIndex(i)" *ngIf="!editing">{{prov[col]}}</span>
    <span class="editfield" *ngIf="editing">
      <input id="changeText" ng-init="getChangeTextCol(col)" type="text" style="margin-right: 10px" placeholder="{{prov[col]}}">
      <button ngOnload="getChangeTextCol(col)" (click)="save(changeText.value); !editing">Save</button>
    </span>
  </td>
  <td id="editdelete">
    <button class="edit" name="editButton" (click)="editToggle(i)">/</button>
    <button class="delete" (click)="deleteRow(i)">x</button>
  </td>
</tr>

public editing: boolean = false;

editToggle(event) {
var table = (<HTMLTableElement>document.getElementById("thetable"));
var getTextFields = table.getElementsByClassName("columnText");   

for (var i = 0; i < getTextFields.length; i++) {
  if (getTextFields[i].getRowIndex(event) == event) {
    getTextFields[i].editing = !getTextFields[i].editing;
   }
 }
}

getRowIndex(event) {
console.log("row index = " + event);
return event;
}

getChangeTextCol(event) {
return event;
}

deleteRow(event) {
this.providers.splice(event, 1);
}

editToggle() is activated on edit button click and finds the current row index of itself by variable i specified by *ngFor. However, I also need to tell angular the row index of the span element containing the html input field to be shown, but I get an error saying property 'getRowIndex' does not exist on type 'Element'. This works for other functions in HTML elements like deleteRow(i), for instance.

Related Questions