使用复选框查询具有选定下拉值的克隆表行

时间:2019-05-13 06:00:23

标签: angular checkbox html-table clone paste

我希望克隆检查行的选定选项值并粘贴到整个表中。

克隆和粘贴后,所选的选项值仅粘贴到该列的最后一行,并且上一行的下拉菜单更改,但所选的下拉选项值未更改。

<table id="dataTable" class="table table-bordered,table table-striped fixed_headers">
  <thead>
        <tr>
      <th></th>
            <th>Name</th>
            <th>Job</th>
            <th>Year Joined</th>
            <th>Mission</th>
    </thead>
  <tbody>
    <tr style="text-align: center" *ngFor="let data of Table;let i = index">
    <td>
      <input type="checkbox">
    </td>
        <td>
            <span>{{data.name}}</span>
        </td>
        <td>
            <span>{{data.job}}</span>
        </td>
        <td>
            <span>{{data.year_joined}}</span>
        </td>
        <td>
            <select>
             <option *ngFor="let mission of data.missions">
                {{mission}}
             </option>
          </select>
        </td>
  </tr>
  </tbody>
</table>
<div class="row">
    <input id="copy" type="submit" name="copy" value="Copy" (click)="copy()" class="btn btn-flat"/>
    <input id="pasteall" type="submit" name="pasteall" value="Paste All" (click)="pasteall()" class="btn btn-flat"/>
</div>
  copy(){
      var srcrow = $('#dataTable tr').has('input:checked');
      this.Row = srcrow.clone();
      this.Row.find('select').val(function(index, value) {
        return srcrow.find('select').eq(index).val();
      });
      console.log(this.Row);
  }

  pasteall(){
    $('#dataTable tbody tr').replaceWith(this.Row);
  }

0 个答案:

没有答案