javascript 向表行添加类不起作用

nue99wik 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(195)

当用户单击表时，我尝试在纯Javascript中做两件事：
1.返回行的编号（它起作用）
1.更改行的背景
这里我的当前代码：

document.querySelector('#tableEvents').onclick = function(e) {
  let index = e.target.parentElement.rowIndex;
  let row = e.target.parentElement;
  row.classList.add('table-warning');
  console.log(index, row.classList.toString());
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />

<table id="tableEvents">
  <thead>
    <tr>
      <th scope="col">Col 1</th>
      <th scope="col">Col 2</th>
      <th scope="col">Col 3</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <td>1</td>
      <td>a</td>
      <td>1a</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>2b</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
      <td>3c</td>
    </tr>
    <tr>
      <td>4</td>
      <td>d</td>
      <td>4d</td>
    </tr>

  </tbody>
</table>

正如您所看到的，它返回了正确的索引，但没有对行进行任何更改。阅读文档后，我了解到将table-warning类（例如）添加到<tr>标记中应该足够了。
它实际上添加了类（控制台显示classList值），但没有显示颜色。
第二个问题是如何从其他行中删除类，在jQuery中我会这样做：

$(this).addClass('table-warning').siblings().removeClass('table-warning');

但是我不知道如何在JavaScript中转换siblings()调用，是否需要遍历整个表，手动删除每一行中的类？

JavaScript

来源：https://stackoverflow.com/questions/75579439/adding-class-to-table-row-has-no-effect

1条答案

按热度按时间

ru9i0ody1#

现在只需要循环除了那一行之外的所有兄弟行，并删除类，不需要jQuery（这里有一些基于如何使用普通JS完成此操作的方法：Is there a way to select sibling nodes?）
此外，您需要添加table类，以便table-warning帮助器类工作：

document.querySelector('#tableEvents').onclick = function(e) {
  let index = e.target.parentElement.rowIndex;
  // skip header
  if(index===0 || !index) return;
  
  let row = e.target.parentElement;
  row.classList.add('table-warning');
  console.log(index, row.classList.toString());
      
    let siblingRow = row.parentNode.firstChild;

    
    while (siblingRow) {

        if (siblingRow.nodeType === 1 && siblingRow !== row) {

            siblingRow.classList.remove('table-warning');
      
        }
        siblingRow = siblingRow.nextSibling;
    }
  
 
}

.as-console-wrapper { max-height: 20% !important; bottom: 0; }

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />

<table class="table" id="tableEvents">
  <thead>
    <tr>
      <th scope="col">Col 1</th>
      <th scope="col">Col 2</th>
      <th scope="col">Col 3</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <td>1</td>
      <td>a</td>
      <td>1a</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>2b</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
      <td>3c</td>
    </tr>
    <tr>
      <td>4</td>
      <td>d</td>
      <td>4d</td>
    </tr>

  </tbody>
</table>

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 向表行添加类不起作用

1条答案

相关问题

热门标签

最新问答