Question

在excel中，可以突出显示一系列单元格，并在“状态栏”中查看“总和”。

可以使用Javascript和HTML表格在IE6中完成吗？

Answer 1

这是一些使用jQuery开始的代码。当然，有很多方法可以改进它。

（编辑：要检查的一件事是它在IE中的效果。我认为您需要在this.onselectstart = function() {return false};事件处理程序中添加mousedown之类的内容来禁用文本在IE浏览器中选择，但我现在并没有将IE用作方便。）

<html>
<head>
<style type="text/css">
    .sel {background-color: #99ff33; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function () {
    function col(cell) {
        return cell.parent().children("td").index(cell);
    }

    var start = null;

    function selectTo(cell) {
        if (start == null)
            return;
        $("td").removeClass("sel");
        var stop = $(cell);
        var tbl = start.closest("table");
        var rs = tbl.children("tbody").children("tr");
        var r0 = rs.index(start.parent()), c0 = col(start);
        var r1 = rs.index(stop.parent()), c1 = col(stop);
        var sum = 0;
        for (var i = r0; i <= r1; i++) {
            var cells = $(rs.get(i)).children("td");
            for (var j = c0; j <= c1; j++) {
                var cell = $(cells.get(j));
                cell.addClass("sel");
                sum += Number(cell.html());
            }
        }
        $("#total").html(""+sum);
    }

    $("table").mousedown(function () {
        return false;
    });

    $("td").mousedown(function () {
        start = $(this);
        selectTo(this);
        return false;
    });

    $("td").mouseover(function () {
        selectTo(this);
    });

    $("td").mouseup(function () {
        selectTo(this);
        start = null;
    });

    $("body").mouseup(function () {
        start = null;
    });
});
</script>

<body>
  <table>
    <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr>
    <tr> <td>2</td> <td>4</td> <td>6</td> <td>8</td> </tr>
    <tr> <td>3</td> <td>6</td> <td>9</td> <td>12</td> </tr>
  </table>
  <p>Total of selected elements: <span id="total"></span></p>
</body>

</html>

Demo here.

Answer 2

如果您实施选择单元格的行为，请确定，为什么不呢？

执行此操作的一种方法是将表（TD）的每个单元格设置为“选定”类，当您希望“求和”这些值时，只需查看表格的TD标签，读取它们的值并显示结果无论你想要什么。

使用jQuery这应该是一个快照（相对而言）。例如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<script type="text/javascript">

  $('#myTable td').live('click', function()
  {
    $(this).toggleClass('selected');
  });

  function sumOfSelectedCells()
  {
    var sum = 0;

    $('#myTable td.selected').each(function()
    {
      sum += parseInt($(this).html()); // switch parseInt() for whatever fits
    });

    return sum;
  }

</script>

不要忘记扔一些CSS让它看起来不错。

更复杂和更先进的解决方案是使用mousedown / mouseup来模拟excel的多个单元格选择行为，但这也不应该太难实现。请记住：请注意边缘情况，其中有很多：）

Answer 3

当然可以做到，但这不会是微不足道的

如果你想让它完全像在Excel中一样工作（点击＆amp; hold + drag＆amp; release），这将是一个比第一时刻想象的复杂工作。

您肯定会在表格的某一列中显示值，但是当您选择这些值时，浏览器通常会根据流程选择文本。这意味着您将获得选定的文本（例如值列）：

     v
| | |x|
|x|x|x|
|x|x|x|

而不是

     v
| | |x|
| | |x|
| | |x|

正如您实际想要的那样。

要使最后一个使其正常工作，您必须实际禁用文本选择（使用onselectstart事件），然后使用drag & drop事件以编程方式选择值列中的某些单元格。

您还可以使用不太直观的方式（在Excel中使用不同的方式）使用单元格click事件，以使您的代码更短更简单。

使用Javascript在IE6中“总结所选单元格”

3 个答案:

当然可以做到，但这不会是微不足道的