使用 JS 在 rmarkdown HTML 文档中复制/删除两个数据表（包：DT）中的行

Question

我正在尝试在 rmarkdown 中生成一个 HTML 文件，其中包含使用“DT”包生成的两个表。目标是为用户提供工具，将行从一个表复制到另一个表，并通过单击三个按钮清空其中一个表的行。

如果我可以使用 Shiny，这将相当简单，但因为我需要一个具有此功能的独立 HTML 文件，所以 Shiny 不是一个选项。我一直在尝试在回调函数中使用 JS，但没有成功。

我的猜测是我需要三个函数来做到这一点：

1. 当用户单击“将表 1 中的选定行移动到表 2”按钮时，将“表 1”的选定行复制到“表 2”
2. 当用户单击“删除表 2 中的选定行”按钮时，删除“表 2”中的选定行
3. 当用户单击“删除表 2 中的所有行”按钮时，删除“表 2”中的所有行

下面是一个最小的可重现示例。

---
title: ""
output: 
 html_document:
  self_contained: false
---

```{r, include=FALSE}
knitr::opts_chunk$set(fig.width=8, fig.height=6, echo=FALSE, warning=FALSE, message=FALSE)
library(DT)
library(dplyr)
```

***

<div class = "row">
<div class = "col-md-6">
<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Move selected rows in table 1 to table 2
</button>

```{r , echo = FALSE}
library(DT)
dt1 = mtcars[1:5,1:3]
dt2 = dt1

datatable(dt1, 
          elementId = "table1",
          caption = "Table 1",
          extensions = c("Select"),
          options = list(
            select = list(style = "multi"),
            dom = "t"
          )
)
```
</div>

<div class = "col-md-6">
<button type="button" class="btn btn-default btn-sm">
  Remove selected rows in table 2
</button>
<button type="button" class="btn btn-default btn-sm">
  Remove all rows in table 2
</button>

```{r , echo = FALSE}
datatable(dt2 %>% slice(1),
          caption = "Table 2",
          elementId = "table2",
          extensions = c("Select", "Buttons"),
          options = list(
            select = list(style = "multi"),
            dom = "tB",
            buttons = list(
              list(
                title = NULL,
                extend = "excel",
                text = 'Save as Excel',
                filename = "selected_variables"
              )
            )
          )
)
```
</div>

Answer 1

我已经完成了第一部分：移动选定的行。这应该可以帮助您完成其他部分。如果您有任何问题，请联系我。

---
title: ""
output: 
 html_document:
  self_contained: false
---

```{r, include=FALSE}
knitr::opts_chunk$set(
  fig.width=8, fig.height=6, echo=FALSE, warning=FALSE, message=FALSE
)
library(DT)
library(dplyr)
```

***

<div class = "row">
<div class = "col-md-6">
<button id="btn_move" type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Move selected rows in table 1 to table 2
</button>

```{r , echo = FALSE}
library(DT)
dt1 = mtcars[1:5,1:3]
dt2 = dt1

callback1 <- c(
  "var table2;",
  "setTimeout(function(){table2 = $('#table2').find('table').DataTable();});",
  "$('#btn_move').on('click', function(){",
  "  var selectedRows = table.rows({selected: true});",
  "  var indices = selectedRows[0];",
  "  var rowsData = selectedRows.data();",
  "  for(var i=0; i<indices.length; i++){",
  "    var data = rowsData[i];",
  "    table2.row.add(data).draw();",
  "    table.row(indices[i]-i).remove().draw();",
  "  }",
  "});"
)

datatable(dt1, 
          elementId = "table1",
          caption = "Table 1",
          extensions = "Select",
          selection = "none",
          callback = JS(callback1),
          options = list(
            select = list(style = "multi"),
            dom = "t"
          )
)
```
</div>

<div class = "col-md-6">
<button type="button" class="btn btn-default btn-sm">
  Remove selected rows in table 2
</button>
<button type="button" class="btn btn-default btn-sm">
  Remove all rows in table 2
</button>

```{r , echo = FALSE}
datatable(dt2 %>% slice(1),
          caption = "Table 2",
          elementId = "table2",
          extensions = c("Select", "Buttons"),
          selection = "none",
          options = list(
            select = list(style = "multi"),
            dom = "tB",
            buttons = list(
              list(
                title = NULL,
                extend = "excel",
                text = 'Save as Excel',
                filename = "selected_variables"
              )
            )
          )
)
```
</div>