如何正确使用 Javascript 来定位 Shiny 中的 gt table 行元素

Question

我正在用 gt table 制作一个闪亮的应用程序。
如果大写，我想将 .gt_group_heading class 中的文本设为粗体。

似乎传递给此元素的任何文本都是在 td 标记内作为纯文本创建的，未被识别为 HTML。

所以我在想也许我可以使用 Javascript 来改变文本的外观？

当我运行应用程序时，我无法让脚本运行。
我收到以下错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null
at (index):22

但是，当我运行应用程序，然后直接在浏览器控制台中键入 javascript 时，我能够使大写文本显示为粗体。

那么是不是闪亮的东西阻止了代码运行正确地运行？在创建 GT table 之后，我似乎需要运行的代码，也许这就是错误消息抛出 null 的原因 - 但我不知道如何使事件的顺序发生在闪亮的.

仅供参考，我尝试用 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></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)

Answer 1

一种可能性是用setTimeout延迟JavaScript代码的执行，例如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></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></strong>');
      heading[i].innerHTML = html;
    } 
  } 
}, 100);

这是 JavaScript 代码。但是由于它是从字符串发送的，所以你必须在正则表达式中加倍反斜杠：/(\b[A-Z]{2,}\b)/g.

如何正确使用 Javascript 来定位 Shiny 中的 gt table 行元素

How to use Javascript correctly to target gt table row elements in Shiny

javascript

r

shiny

shinyjs

gt