Question

我通过id得到元素HTML：

const trele = document.getElementById(printSectionId).getElementsByTagName('tr');

然后我尝试删除具有类no-print的行：

for (let i = 0; i < trele.length; i++)
    {

      if (trele[i].classList.contains("no-print")) {
        temp.deleteRow(i);
      }
    }

但它返回包括no-print的所有行：

console.log(temp.outerHTML);

HTML表格：

<table class="HTMLGrid padding-top-twenty" id="print">

    <tbody>
    <tr *ngFor="let p of fltUsers; let i = index; let isOdd=odd; let isEven=even" [class.odd]="isOdd"
        [class.even]="isEven" [ngClass]="{'no-print': !p.checked, 'print': p.checked }">
      <td>
        <div class="image-checkbox">
          <img
            src="../../../../../assets/img/blank-person.jpg"
            class="avatar">
          <div class="checkbox" [ngClass]="{'block': p.checked }">
            <md-checkbox [checked]="p.checked" (change)="p.checked = !p.checked"></md-checkbox>
          </div>
        </div>
      </td>
      <td>{{p.lastName}} {{p.firstName}} {{p.middleName}}</td>
      <td>{{formatDate(p.birthDate)}}</td>
      <td class="hidden-sm-up">{{formatGender(p.gender)}}</td>
      <td>{{p.position}}</td>
      <td>{{p.contract}}</td>
      <td>{{p.subjectNames}}</td>
      <td>{{p.totalHours}}</td>
      <!--<td>{{formatDate(p.startDate)}}</td>-->
      <!--<td>{{formatDate(p.finishDate)}}</td>-->
      <td>{{formatPhone(p.mobilePhone)}}</td>
      <!--<td>{{formatRole(p.role)}}</td>-->
      <!--<td>##.##.####</td>-->
      <td>
        <div class="button-icons" (click)="openEditDlg(i)"><span class="edit(1)"><i class="material-icons">mode_edit</i></span>
        </div>
        <div class="button-icons" (click)="openFireDlg(i)"><span class="edit(1)"><i
          class="material-icons">clear</i></span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>

Answer 1

您的代码逻辑看似合理，但由于该表依赖Angular来实现no-print类，因此您需要确保在Angular呈现表后执行脚本。

＆＃13;

// Get table reference:
var t = document.getElementById("print");

// Get the rows (live node list is used to ensure
// that the collection is updated upon each acces
// of the variable):
var rows = document.getElementsByTagName("tr");

// Loop over the rows
for(var i = 0; i < rows.length; i++){
  // Remove only the .no-print row based on its index within the table
  if(rows[i].classList.contains("no-print")){
    t.deleteRow(i);
  }
}

＆＃13;

<table class="HTMLGrid padding-top-twenty" id="print">
 <tbody>
    <tr class="no-print">
      <td>Row 1</td>
      <td>Row 1</td>      
    </tr>
    <tr class="print">
      <td>Row 2</td>
      <td>Row 2</td>      
    </tr>
    <tr class="no-print">
      <td>Row 3</td>
      <td>Row 3</td>      
    </tr>
    <tr class="print">
      <td>Row 4</td>
      <td>Row 4</td>      
    </tr>
    <tr class="no-print">
      <td>Row 5</td>
      <td>Row 5</td>      
    </tr>
    <tr class="print">
      <td>Row 6</td>
      <td>Row 6</td>      
    </tr>    

 </tbody>
</table>

＆＃13;

表行没有deleteRow？

1 个答案: