我想在一个shiny 的应用程序中显示一个由tinytable包生成的HTML表.表格的一个单元格具有由window.addEventListener触发的JavaScript函数应用的CSS样式.
到目前为止，我所try 的是:
- 从JS脚本组件中拆分表格组件.
- 通过
tags@head(tags$script(HTML(script)))将脚本提供给ui - 通过
renderUI(HTML(table))将表格提供给server
当我运行应用程序，访问网站，并 Select 查看源代码时，我在Head中看到了脚本，但样式没有应用到表中.
这是我到目前为止使用的代码:
library("shiny")
library("tinytable")
# Create a styled HTML table using the tinytable package
tab <- tt(mtcars[1:5, 1:4]) %>%
style_tt(1, 1, color = "orange", background = "black") %>%
save_tt("html")
# Split script from table
lines <- strsplit(tab, "\n")[[1]]
idx_open <- max(grep("<script>$", lines))
idx_close <- max(grep("</script>$", lines))
script <- paste(lines[(idx_open + 1):(idx_close - 1)], collapse ="\n")
tab <- c(lines[1:(idx_open-1)], lines[(idx_close+1):length(lines)])
tab <- paste(tab, collapse = "\n")
# Launch Shiny app
shinyApp(
ui = fluidPage(
tags$head(tags$script(HTML(script))),
fluidRow(column(12, h1("This is test of tiny table"), uiOutput('table')))),
server = function(input, output) {n
output$table <- renderUI(HTML(tab))
}
)
设置了样式的表格应该如下所示:
在这款shiny 的应用程序中，表格显示得很好，但没有黑色单元格上的橙色.
以下文件夹包含完整的HTML以供参考:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tinytable_foso3jzxac6xevph2ijf</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.table td.tinytable_css_c4k1sy9wnv7b3ohvpz8x, .table th.tinytable_css_c4k1sy9wnv7b3ohvpz8x { border-bottom: solid 0.1em #d3d8dc; }
.table td.tinytable_css_301bqkqzpns14bb4286d, .table th.tinytable_css_301bqkqzpns14bb4286d { color: orange; background-color: black; }
</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
</head>
<body>
<div class="container">
<table class="table table-borderless" id="tinytable_foso3jzxac6xevph2ijf" style="width: auto; margin-left: auto; margin-right: auto;" data-quarto-disable-processing='true'>
<thead>
<tr>
<th scope="col">mpg</th>
<th scope="col">cyl</th>
<th scope="col">disp</th>
<th scope="col">hp</th>
</tr>
</thead>
<tbody>
<tr>
<td>21.0</td>
<td>6</td>
<td>160</td>
<td>110</td>
</tr>
<tr>
<td>21.0</td>
<td>6</td>
<td>160</td>
<td>110</td>
</tr>
<tr>
<td>22.8</td>
<td>4</td>
<td>108</td>
<td> 93</td>
</tr>
<tr>
<td>21.4</td>
<td>6</td>
<td>258</td>
<td>110</td>
</tr>
<tr>
<td>18.7</td>
<td>8</td>
<td>360</td>
<td>175</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
function styleCell_tinytable_a3n06841ebx0qj2p20q5(i, j, css_id) {
var table = document.getElementById("tinytable_foso3jzxac6xevph2ijf");
table.rows[i].cells[j].classList.add(css_id);
}
function insertSpanRow(i, colspan, content) {
var table = document.getElementById('tinytable_foso3jzxac6xevph2ijf');
var newRow = table.insertRow(i);
var newCell = newRow.insertCell(0);
newCell.setAttribute("colspan", colspan);
// newCell.innerText = content;
// this may be unsafe, but innerText does not interpret <br>
newCell.innerHTML = content;
}
function spanCell_tinytable_a3n06841ebx0qj2p20q5(i, j, rowspan, colspan) {
var table = document.getElementById("tinytable_foso3jzxac6xevph2ijf");
const targetRow = table.rows[i];
const targetCell = targetRow.cells[j];
for (let r = 0; r < rowspan; r++) {
// Only start deleting cells to the right for the first row (r == 0)
if (r === 0) {
// Delete cells to the right of the target cell in the first row
for (let c = colspan - 1; c > 0; c--) {
if (table.rows[i + r].cells[j + c]) {
table.rows[i + r].deleteCell(j + c);
}
}
}
// For rows below the first, delete starting from the target column
if (r > 0) {
for (let c = colspan - 1; c >= 0; c--) {
if (table.rows[i + r] && table.rows[i + r].cells[j]) {
table.rows[i + r].deleteCell(j);
}
}
}
}
// Set rowspan and colspan of the target cell
targetCell.rowSpan = rowspan;
targetCell.colSpan = colspan;
}
window.addEventListener('load', function () { styleCell_tinytable_a3n06841ebx0qj2p20q5(0, 0, 'tinytable_css_c4k1sy9wnv7b3ohvpz8x') })
window.addEventListener('load', function () { styleCell_tinytable_a3n06841ebx0qj2p20q5(0, 1, 'tinytable_css_c4k1sy9wnv7b3ohvpz8x') })
window.addEventListener('load', function () { styleCell_tinytable_a3n06841ebx0qj2p20q5(0, 2, 'tinytable_css_c4k1sy9wnv7b3ohvpz8x') })
window.addEventListener('load', function () { styleCell_tinytable_a3n06841ebx0qj2p20q5(0, 3, 'tinytable_css_c4k1sy9wnv7b3ohvpz8x') })
window.addEventListener('load', function () { styleCell_tinytable_a3n06841ebx0qj2p20q5(1, 0, 'tinytable_css_301bqkqzpns14bb4286d') })
</script>
</body>