Html 是否可以使 huxtable 输出悬停

发布于03月23日

具体地说，这适用于用kableExtra制作的表格，这会产生非常吸引人的效果.我想知道有没有人知道huxtable是如何做到这一点的.

这里有一个RMD的例子，让你一瞥我的意思.我希望Huxtable支持在风筝中可见的悬停效果.

---
output: bookdown::html_document2
---

```{r lib}
library(magrittr)
```

```{r kable}
iris %>%
  head() %>%
  kableExtra::kbl(caption = "a caption") %>%
  kableExtra::kable_styling(bootstrap_options = "hover")
```

```{r huxtable}
iris %>%
  head() %>%
  huxtable::hux() %>%
  huxtable::set_caption("a caption")
```

推荐答案

如果您判断底层生成的HTMLforkableExtra表，您将看到，对于bootstrap_options = "hover",kableExtra使用了一个CSS类table-hover，它正在创建这样一种悬停效果.

了解到这一点，一种可能的方法是将table-hover类附加到所有Huxtable上，这可以很容易地使用Java脚本来完成.

---
output: bookdown::html_document2
---

```{r lib}
library(magrittr)
```


```{r huxtable}
iris %>%
  head() %>%
huxtable::hux() %>%
  huxtable::set_caption("a caption")
```


```{r huxtable2}
mtcars %>%
  head() %>%
huxtable::hux() %>%
  huxtable::set_caption("another caption")
```


```{=html}
<style>

.table-hover>tbody>tr:hover {
  background-color: #f5f5f5 !important;
}

</style>



<script>

function make_table_hover() {
  let huxtable = document.querySelectorAll('table.huxtable');
  huxtable.forEach(tab => {
    if (!tab.classList.contains('table-hover')) {
      tab.classList.add('table-hover');
    }
  });
};

window.addEventListener("load", (event) => {
  make_table_hover();
});
</script>

```