删除行后如何更新索引

Question

<table class="table">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Duration</th>
                            <th scope="col">Play</th>
                            <th scope="col">Delete</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Didn't love</td>
                            <td>4:18</td>
                            <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
                            <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Keys</td>
                            <td>3:51</td>
                            <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
                            <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Smoking</td>
                            <td>5:12</td>
                            <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
                            <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
                          </tr>

我有一个表，我需要删除行并用索引更新第一列。

let delBtn = document.querySelectorAll('.delete');

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

               delBtn[i].addEventListener('click', function(){

                this.parentElement.parentElement.style.display = 'none';

               });
            }

'delete'函数有效，但是我不知道如何刷新第一个col。我需要经历“ for循环”吗？

Answer 1

您只需要遍历所有行并更新其第一个单元格的.textContent属性：