时间戳

首页 > 解决方案 > 用户输入时如何在表中动态添加一行（postman-style-reactive-table）

javascript - 用户输入时如何在表中动态添加一行（postman-style-reactive-table）

问题描述

如何在标题选项卡中输入至少一个字符（如邮递员的行为）时动态添加一行。

td1）当用户在第一行输入任何单个字符时，应在下面添加一行。当用户从第一行 td中删除文本并且当第一行为空时，然后删除下面的行。

2) 跟踪模型中每一行输入的文本（即键和值）；

3）当用户在任何一个行中输入任何单个字符时，td应选中复选框，否则不选中。

.ts

    model =  new Model ('','','',..............);
    tableRow = {
    "key":[{
    'name':'key1',
    'keyInput':""
    }],
    "value":[{
    'name':'value1',
    'keyInput':""
    }]
    }

addRow(event){
    if(event.target.length < 2){
     let data = {
           'name':'key' + (this.tableRow.key.length + 1),
           'keyInput':""
           }
         this.tableRow.key.push(data )
       }else{
        this.tableRow.key.pop();
         }
       }

.html

<div class="col-12 table-responsive">
<table class="table">
<thead>
<th>
<td></td>
<td>Key</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr *ngFor="let row of tableRow.key; let i = index;">
<td><input type="checkbox"></td>
<td><input (keyup)="addRow($event)" [(ngModel)]="model.key" type="text"></td>
<td><input [(ngModel)]="model.value" type="text"></td>
</tr>
</tbody>
</table>
</div>

标签： javascripthtmlangular

解决方案

这是您可能想要的非常基本的实现。

零件：

export class AppComponent {
  title = 'stack-solve';
  //defining row of objects and initializing first row with empty values
  //All values entered on the screen are bound to this array
  rows: any[] = [{
    checked:false,
    key:'',
    value:''
  }];

//This function is called on keyup and checks the checkbox on that row and adds new row if the action was on the last row  
checkAndAddRow(i){
    this.rows[i].checked = true;
    if(this.rows.length - 1 == i){//insert new empty row, incase this keyup event was on the last row, you might want to enhance this logic... 
      this.rows.push({
        checked:false,
        key:'',
        value:''
      })
    }

  }
}

模板：

  <div class="col-12 table-responsive">
    <table class="table">
      <thead>
        <td></td>
        <td>Key</td>
        <td>Value</td>
      </thead>
      <tbody>
        <tr *ngFor="let row of rows; let i = index">
          <td><input [checked]="row.checked" type="checkbox"></td>
          <td><input [(ngModel)]="row.key" type="text" name="key" (keyup)="checkAndAddRow(i)"></td>
          <td><input [(ngModel)]="row.value" type="text" name="value" (keyup)="checkAndAddRow(i)"></td>
        </tr>
      </tbody>
    </table>
  </div>

应用程序模块：

imports: [
    BrowserModule,
    FormsModule // need to import FormsModule if you don't have already
  ],

推荐阅读