javascript - 如何仅按水平顺序从表格中选择多个单元格？

Question

我想仅在 javascript/jquery 的帮助下以水平顺序从 HTML 表格中选择多个单元格，我该怎么做？我指的代码如下，我有一个简单的 HTML 表格，其中 <tr></tr>和<td></td>

   $(document).ready(function () {
      if ($('.table').length) {
          var $td = $('.table').find('td');
          var isMouseDown = false;
          var isHighlighted;

          $td.mousedown(function () {
              isMouseDown = true;
              $(this).toggleClass("highlighted");
              isHighlighted = $(this).hasClass("highlighted");
              return false;
          }).mouseenter(function () {
              if (isMouseDown) {
                  $(this).toggleClass("highlighted");
              }
          }).mouseup(function () {
              if (isMouseDown) {
                  $(this).toggleClass("highlighted", isHighlighted);
              }
          }).on("selectstart", function () {
              return false;
          });

          $(document).mouseup(function () {
              isMouseDown = false;
          });
      }
  });

Answer 1

这就是您需要的吗？

<小时/>

说明:

• 我使用 mousedown 和 mouseup 为整个 body 元素创建两个事件监听器，以在作用于整个 body 元素时观察鼠标按钮操作。对于每个第一个 mousedown 事件，我删除了所有 .highlight 类。
• 当鼠标进入 table 上的 td 时，我正在观看悬停事件。因此，当指针进入 td 对象时，我们可以在 td 中添加一个新的 .highlight 类。

<小时/>

更新:

• 添加仅选择同一行的逻辑。

$(document).ready(function () {
  var isMouseDown = false;
  var lastTr = -1;
  
  $('body').mousedown(function() {
    isMouseDown = true;
    $('td').removeClass('highlight');
  })
  .mouseup(function() {
    isMouseDown = false;
  });

  $("table td").hover(function(){
    var ctr = $(this).closest('tr').index();
    lastTr = lastTr === -1 ? ctr : lastTr;
    
    if (isMouseDown)
      if (lastTr !== ctr)
        $('td').removeClass('highlight');
      else
        $(this).addClass("highlight");
    
    lastTr = $(this).closest('tr').index();
  });

  $("table td").click(function(){
    $(this).toggleClass('highlight');
  });
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    cursor: pointer;
    background-color: #fff;
}

.highlight {
  background-color: #ccc !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>