我正在制作一个有gt表的闪亮应用程序。
我想使。gt_group_heading类中的文本如果大写则加粗。
似乎传递给这个元素的任何文本都是在td标签中作为纯文本创建的，而不是被识别为HTML。
所以我想也许我可以改变使用Javascript文本的外观?
当我运行应用程序时，我无法让脚本工作。
我得到以下错误:
Uncaught TypeError: Cannot read property 'innerHTML' of null
at (index):22
但是，当我运行应用程序，然后直接在浏览器控制台中键入javascript时，我能够获得大写文本以粗体显示。
所以它是关于闪亮的东西，是阻止代码正确运行吗?似乎我需要在创建GT表后运行的代码，也许这就是错误消息抛出null的原因-但我不知道如何使事件的顺序在shiny中发生。
仅供参考，我已经尝试用html标签包装df$name中的字符串，但这不能正确呈现，即以下不工作:
`df$name <- mutate(df$name, paste("<b>", df$name, "</b>"))`
非常感谢任何帮助。下面是我的示例代码。
library(tidyverse)
library(gt)
library(shiny)
df <- tibble(
name = c("john", "john", "jerry", "jerry", "jack", "jack", "jim", "jim"),
day = c("wed", "wed", "thurs", "thurs", "mon", "mon", "tues", "tues"),
lotto = c(12, 42, 24, 57, 234, 556, 34, 23),
car = c("chevy", "toyota", "honda", "gmc", "tesla", "nissan", "ford", "jeep")
) %>%
mutate(name = toupper(name))
options(gt.row_group.sep = "n")
ui <- fluidPage(
gt_output("table"),
tags$script(
HTML(
"
var heading = document.querySelector('#one > table > tbody > tr > td');
var html = heading.innerHTML;
html = html.replace(/(b[A-Z]{2,}b)/g,'<strong>$1</strong>');
heading.innerHTML = html;
"
)
)
)
server <- function(input, output, session){
output$table <- render_gt(
df %>%
arrange(lotto) %>%
gt(
id = "one",
groupname_col = c("name", "day"),
rownames_to_stub = TRUE,
row_group.sep = getOption("gt.row_group.sep", "n")
) %>%
opt_css(
css = "
#one .gt_group_heading {
white-space:pre-wrap;
word-wrap:break-word;
}
"
)
)
}
shinyApp(ui, server)
一种可能性是延迟执行JavaScript代码的setTimeout，例如2秒:
setTimeout(function() {
var heading = document.querySelector('#one > table > tbody > tr > td');
var html = heading.innerHTML;
html = html.replace(/(b[A-Z]{2,}b)/g, '<strong>$1</strong>');
heading.innerHTML = html;
}, 2000); // 2000ms = 2s
如何选择一个合适的延迟值从来都不清楚。另一种可能性是使用间隔，它每100ms执行一次，直到找到对象:
var myinterval = setInterval(function() {
var heading = document.querySelectorAll('#one > table > tbody > tr > td');
if(heading) {
clearInterval(myinterval);
for(var i=0; i<heading.length; i++){
var html = heading[i].innerHTML;
html = html.replace(/(b[A-Z]{2,}b)/g, '<strong>$1</strong>');
heading[i].innerHTML = html;
}
}
}, 100);
这是JavaScript代码。但是由于它是从字符串发送的，因此必须在正则表达式中使用双反斜杠:/(\b[A-Z]{2,}\b)/g.