如何用原生JavaScript创建一个树型结构的表格，并且实现行的多选、拖拽、替换右、键功能

要用原生 JavaScript 创建一个树型结构的表格，并且实现行的多选、拖拽、替换右键功能，可以按照以下步骤进行：

1. 构建 HTML 结构

首先需要构建基本的 HTML 结构，包含表格的基本结构和样式：

<table id="mytable">
  <thead>
    <tr>
      <th>名称</th>
      <th>描述</th>
      <th>类型</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>节点1</td>
      <td>描述1</td>
      <td>类型1</td>
    </tr>
    <tr data-id="2" data-parent-id="1">
      <td>节点2</td>
      <td>描述2</td>
      <td>类型2</td>
    </tr>
    <tr data-id="3" data-parent-id="1">
      <td>节点3</td>
      <td>描述3</td>
      <td>类型3</td>
    </tr>
  </tbody>
</table>

其中，每个行的唯一标识使用 `data-id` 属性来表示，每个行的父级标识使用 `data-parent-id` 属性来表示。

2. 添加样式

为了使表格更具有树形结构的特征，需要添加一些 CSS 样式：

#mytable td {
  padding-left: 20px;
}

#mytable tr[data-parent-id] {
  display: none;
}

#mytable tr[data-parent-id].expanded {
  display: table-row;
}

其中，`#mytable td` 用于设置每个单元格的左边距，`#mytable tr[data-parent-id]` 用于隐藏所有子节点，`#mytable tr[data-parent-id].expanded` 用于显示已经展开的子节点。

3. 添加多选功能

为了实现行的多选功能，可以使用以下代码：

var selectedRows = [];

document.getElementById("mytable").addEventListener("click", function(event) {
  var target = event.target;
  if (target.tagName.toLowerCase() === "td") {
    var row = target.parentNode;
    if (selectedRows.indexOf(row) === -1) {
      selectedRows.push(row);
      row.classList.add("selected");
    } else {
      selectedRows.splice(selectedRows.indexOf(row), 1);
      row.classList.remove("selected");
    }
  }
});

其中，`selectedRows` 用于存储选中的行，`document.getElementById("mytable").addEventListener("click", function(event) {...})` 用于监听表格的点击事件，并且判断点击的元素是否为单元格，如果是，则获取该行，并且将该行添加到 `selectedRows` 数组中，并且添加 `selected` 类名；如果已经存在于 `selectedRows` 中，则将该行从 `selectedRows` 数组中移除，并且移除 `selected` 类名。

4. 添加拖拽功能

为了实现行的拖拽功能，可以使用以下代码：

var draggingRow = null;

document.getElementById("mytable").addEventListener("mousedown", function(event) {
  var target = event.target;
  if (target.tagName.toLowerCase() === "td") {
    draggingRow = target.parentNode;
  }
});

document.getElementById("mytable").addEventListener("mousemove", function(event) {
  if (draggingRow !== null) {
    draggingRow.classList.add("dragging");
  }
});

document.getElementById("mytable").addEventListener("mouseup", function(event) {
  if (draggingRow !== null) {
    draggingRow.classList.remove("dragging");
    draggingRow = null;
  }
});

其中，`draggingRow` 用于存储正在拖拽的行，`document.getElementById("mytable").addEventListener("mousedown", function(event) {...})` 用于监听鼠标按下事件，如果按下的元素为单元格，则获取该行，并且将该行赋值给 `draggingRow`；`document.getElementById("mytable").addEventListener("mousemove", function(event) {...})` 用于监听鼠标移动事件，如果正在拖拽行，则为该行添加 `dragging` 类名；`document.getElementById("mytable").addEventListener("mouseup", function(event) {...})` 用于监听鼠标松开事件，如果正在拖拽行，则将 `draggingRow` 赋值为 null，并且移除 `dragging` 类名。

5. 添加替换右键功能

为了实现行的替换右键功能，可以使用以下代码：

document.getElementById("mytable").addEventListener("contextmenu", function(event) {
  var target = event.target;
  if (target.tagName.toLowerCase() === "td") {
    var row = target.parentNode;
    var parentId = row.getAttribute("data-parent-id");
    if (parentId !== null) {
      event.preventDefault();
      var parentRow = document.querySelector("[data-id='" + parentId + "']");
      var nextSiblingRow = parentRow.nextElementSibling;
      if (nextSiblingRow !== null) {
        parentRow.parentNode.insertBefore(row, nextSiblingRow);
      } else {
        parentRow.parentNode.appendChild(row);
      }
    }
  }
});

其中，`document.getElementById("mytable").addEventListener("contextmenu", function(event) {...})` 用于监听右键菜单事件，如果右键菜单的元素为单元格，则获取该行，并且获取该行的父级标识 `data-parent-id`，如果存在，则阻止右键菜单事件的默认行为，并且获取该行的父级行和下一个兄弟行，然后将该行插入到父级行和下一个兄弟行之间。

综上所述，以上步骤就是用原生 JavaScript 创建一个树型结构的表格，并且实现行的多选、拖拽、替换右键功能的方法。