Question

可以使用CMD或CTRL垂直选择单元格，从而在表格中按列选择文本。

我正在寻找与此相似的互动，用户可以通过点击和拖动选择列中的所有文字。有没有办法用js或css做到这一点？

我知道可以使用js来控制当前突出显示的文本，我知道我可以将鼠标拖动事件添加到每个要为我突出显示的单元格中，但这看起来有点沉重。< / p>

我所想到的最好的是一个表格，其中所有单元格都不是文本可选的，可以监听mousedown事件并创建和附加css，允许选择tr＆gt; td：nth-child（col num ）。

但是在我尝试写这样的东西之前（甚至可能不起作用）我宁愿问：对于像这样的问题有什么轻松和聪明的吗？

下面是一个代码片段，您可以在其中使用CMD选择表格中的单元格。

编辑：我尝试过上面的解决方案，但它似乎无法正常工作。

编辑：在处理代码后，它似乎正在运行。这似乎仍然是一个hacky解决方案，但它现在已经足够好了。我很快会发布一个答案较少的代码。

＆＃13;

var addedStyle;
document.addEventListener("DOMContentLoaded", function(){
  var $main_table = document.getElementById("main_table");
  
  //on table cell mouse down
  $main_table.addEventListener("mousedown", function(event) {
    var target = event.target;
    var colNodes = target.parentElement.childNodes;
    var colNum = -1;
    //find the column number
    for(var i = 0; colNum == -1 && i < colNodes.length; i++) {
      if(colNodes[i]==target)
        colNum = i;
    }
    
    //add css to allow selection for the discovered column number
    if(addedStyle == undefined)
      addedStyle = document.createElement("style");
      
    addedStyle.innerHTML = "#main_table tr>td:nth-child("+(colNum+1)+`){ -webkit-user-select: auto;
  -moz-user-select: auto;   
  -ms-user-select: auto;    
  user-select: auto;   }`
    document.body.appendChild(addedStyle);

    //console.log(addedStyle.innerHTML);
  });
  
  //clean up
  document.body.addEventListener("mouseup", function(){
    if(addedStyle)
      addedStyle.remove();
  });
  
});

＆＃13;

td {
  padding: 5px;
  margin: 0px;
  border: 1px solid black;
  -webkit-user-select: none;
  -moz-user-select: none;   
  -ms-user-select: none;    
  user-select: none;  
}

＆＃13;

Hold CMD or CTRL while click-draging over table cells to select by col or group.
<table id="main_table">
  <tr><td>0,0</td><td>1,0</td><td>2,0</td></tr>
  <tr><td>0,1</td><td>1,1</td><td>2,1</td></tr>
  <tr><td>0,2</td><td>1,2</td><td>2,2</td></tr>
</table>

＆＃13;

CSS或JS用于逐列选择文本？

0 个答案: