下面的简化代码示例允许用户向输入矩阵中输入值.第一个矩阵base_input是静态的(具有一个输入列),并且呈现的下两个输入矩阵是动态的(具有两个输入列并且可垂直扩展).来自base_input个的数据输入到两个动态矩阵中.我想将彩色背景添加到输入矩阵中开放供用户输入的部分.我是一个彻头彻尾的css/html新手,我设法在ui部分拼凑了下面的css代码,以便在调用应用程序和用户将输入更改为base_input时都能正确地给base_input矩阵上色.试一试,但我不能对更动态的输入矩阵var_1_inputvar_2_input执行相同的操作,如下图所示.对于如何做到这一点,有什么建议吗?

enter image description here

代码:

library(shinyMatrix)
library(shiny)
library(shinyjs)

matInputBase <- function(name) {
  matrixInput(
    name,
    value = matrix(rep(20,2),2, 1,dimnames = list(c("A", "B"), NULL)),
    rows = list(extend = FALSE, names = TRUE),
    cols = list(extend = FALSE, names = FALSE, editableNames = FALSE),
    class = "numeric"
  )
}

matInputVary <- function(name, x,y) {
  matrixInput(
    name,
    value = matrix(c(x, y), 1, 2, dimnames = list(NULL,c("X","Y"))),
    rows = list(extend = TRUE, names = FALSE),
    cols = list(extend = TRUE, delta = 0, names = TRUE, editableNames = FALSE),
    class = "numeric"
  )
}

ui <- fluidPage(
  useShinyjs(),
  inlineCSS(list(".highlight" = "background-color: red;")),
  tags$head(
    tags$script(HTML("
      function applyHighlight() {
        $('#base_input td:nth-child(2)').addClass('highlight');
      }
      $(document).on('shiny:connected', function(event) {
        applyHighlight();  // Apply highlight when the app connects
      });
      $(document).on('shiny:inputchanged', function(event) {
        if (event.name === 'base_input') {
          setTimeout(applyHighlight, 10);  
        }
      });
    "))
  ),
  sliderInput("periods","Time window (W):", min = 1, max =10, value = 5),
  h5(strong("Variable (Y) over window (W):")),
  matInputBase("base_input"),
  uiOutput("Vectors")
)

server <- function(input, output, session) {
  output$Vectors <- renderUI({
    input$resetVectorBtn
    varNames <- c("A", "B")
      lapply(1:2, function(i) {
        list(
          h5(strong(paste("Adjust", varNames[i], "(Y) at time X:"))),
          matInputVary(paste0("var_", i, "_input"), input$periods, input$base_input[i, 1])
        )
      })
  })

}

shinyApp(ui, server)

推荐答案

您不需要求助于JavaScript.矩阵输入的级别为vue-input,因此您可以简单地使用下面的css:

.vue-input td:nth-child(2) { background-color: red; }

即:

ui <- fluidPage(
  tags$style(HTML(".vue-input td:nth-child(2) { background-color: red; }")),
  sliderInput("periods","Time window (W):", min = 1, max =10, value = 5),
  h5(strong("Variable (Y) over window (W):")),
  matInputBase("base_input"),
  uiOutput("Vectors")
)

Html相关问答推荐

如何删除html原生对话框的宽度

z—index总是 destruct 我的头,我该如何修复它?

Xpath:提取标签之间的文本,但一旦出现嵌入标签就停止

不能以Angular 更改输入的S边框 colored颜色

如何使用Reaction Js读取html文件中的代码

滚动平滑在笔记本电脑上不起作用,但在Nextjs网站的手机浏览器中起作用

HTMLTag属性内的svelte+TS类型声明

如何使div填充父项的剩余高度

使用单个粗体字符串向段落添加页边空白

为什么带有截断的 contentedible div 在受约束时会在 Chrome 中添加空格

如何检测输入字段是否没有必填且没有占位符?

使用修饰键微调 HTML 输入范围中的值

如何使用CSS Select 同级元素的::before伪元素?

您如何动态更改 Vue 中更高级别的标签的 CSS

提交前的验证表单未显示任何验证消息?

有没有办法让 textarea 在调整大小时不显示 CSS 转换?

Css 左属性问题

在一行中对齐两个不同形式的按钮

用 flexbox 和 overflow 覆盖

如何计算没有根元素的先前 html 标记(lxml python3)编辑:还获取元素