Question

我需要在浏览器中创建一个表格，您可以从中选择数据并将其复制出来。您也可以粘贴数据。当您有 10x10 的桌子时，您应该能够从中间选择 4x4 的正方形并将其复制出来。与粘贴数据相同。使用 HTML 表格，当您选择数据时，它会从中间选择，但是如果您向下或对角移动光标，它将按行选择。

选择应该如何工作的示例类似于handsontable

如何实现这一目标的想法？

Answer 1

我决定稍微处理一下并想出了这个。它并不完美，但您可以了解我想要做的事情的要点：

from pytorch_lightning.callbacks import ModelCheckpoint

save_model_path = path/to/your/dir
def checkpoint_callback():
    return ModelCheckpoint(
        dirpath=save_model_path, # changed line
        save_top_k=True,
        verbose=True,
        monitor='val_loss',
        mode='min',
        prefix=''
    )

var i_init = -1;
var j_init = -1;
var i_final = -1;
var j_final = -1;
var clicked = false;
var tableRows = document.getElementsByTagName('tr');

for (let i = 0; i < tableRows.length; i++) {
  var tableElements = tableRows[i].children;
  for (let j = 0; j < tableElements.length; j++) {
    tableElements[j].classList.add(i);
    tableElements[j].classList.add(j);
    tableElements[j].addEventListener('mouseover', OnMouseoverEvent);
    tableElements[j].addEventListener('click', ClickEvent)
  }
}

function UpdateTable() {
  var tableElements = document.getElementsByTagName('td');
  for (let z = 0; z < tableElements.length; z++) {
    let i = tableElements[z].classList[0];
    let j;
    if (tableElements[z].classList.length == 1) {
      j = i;
    } else {
      j = tableElements[z].classList[1];
    }

    let i_compare = (i >= i_init && i <= i_final);
    let j_compare = (j >= j_init && j <= j_final);

    if (i_final < i_init) {
      // backwards i
      i_compare = (i <= i_init && i >= i_final);
    }

    if (j_final < j_init) {
      // backwards j
      j_compare = (j <= j_init && j >= j_final);
    }

    if (i_compare && j_compare) {
      tableElements[z].style.backgroundColor = "blue";
    } else {
      tableElements[z].style.backgroundColor = "transparent";
    }

  }
}

function ClickEvent() {
  let i = this.classList[0];
  let j;
  if (this.classList.length == 1) {
    j = i;
  } else {
    j = this.classList[1];
  }

  i_init = i;
  j_init = j;
  clicked = true;
}

function OnMouseoverEvent() {
  if (!clicked) {
    return;
  }

  let i = this.classList[0];
  let j;
  if (this.classList.length == 1) {
    j = i;
  } else {
    j = this.classList[1];
  }

  i_final = i;
  j_final = j;

  UpdateTable();
}

.table td {
  border: 1px solid red;
  height: 50px;
  width: 50px;
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

仅选择 html 表格的一部分

1 个答案: