jquery 删除表格行,但保留CSS备用行格式

lbsnaicq  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(104)

因此,我有一个表,它的行具有交替格式(比如灰色和白色)。我用tr.remove() jquery函数删除了一行,当然它上面/下面的行的css不会改变,它们会保持它们的奇/偶样式。基本上:

Before Deletion         After Deletion

grey                    grey
white                   white
grey                    white
white                   grey
grey

有没有什么方法可以快速强制表格“刷新”样式?或者我必须使用jquery手动应用它们?
多谢了!

chhkpiq4

chhkpiq41#

所以用CSS来做样式,而不是使用奇数/偶数类/硬编码值。

document.querySelector("tbody").addEventListener("click", function(e) {
    var td = e.target,
        tr = td.parentNode;
        tr.parentNode.removeChild(tr);
    
});
tr:nth-child(even) {
      background-color: #FFF;
    }
    
    tr:nth-child(odd) {
      background-color: #CCC;
    }
<table>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
  </tbody>
</table>
nle07wnf

nle07wnf2#

使用:nth-child(even of :not([hidden]))。此选择器确保在整个表中一致地更新条带化。

const hideBtns = document.querySelectorAll("[data-hide-btn]")

hideBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    btn.closest("tr").classList.add("hidden")
  })
})
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 80%;
}

table td,
table th {
  border: 1px solid #ddd;
  padding: 8px;
}

table tr:nth-child(even of :not(.hidden)) {
  background-color: lightgray;
}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

tr.hidden {
  display: none;
}
<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th></th>
    </tr>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td><button data-hide-btn>
        Hide
      </button></td>
  </tr>
</table>

相关问题