使用Javascript来'；对所选单元格求和'；在IE6中_Javascript_Html_Internet Explorer 6

使用Javascript来'；对所选单元格求和'；在IE6中

javascript html

使用Javascript来'；对所选单元格求和'；在IE6中,javascript,html,internet-explorer-6,Javascript,Html,Internet Explorer 6,在excel中，可以突出显示一系列单元格，并在“状态栏”中查看“总和” 这可以在IE6中使用Javascript和HTML表来完成吗？如果您实现了选择单元格的行为，当然，为什么不呢实现这一点的一种方法是使用“selected”类设置表（TD）的每个单元格，当您希望对值进行“求和”时，只需查看表的TD标记，读取它们的值并在任何地方显示结果使用jQuery，这应该是一个简单的过程（相对而言）。例如： <script type="text/javascript" src="http://aj

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

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

如果您实现了选择单元格的行为，当然，为什么不呢

实现这一点的一种方法是使用“selected”类设置表（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>


1.
2.
3.
4.
$（'#myTable td'）.live（'click'，function（）
{
$（this.toggleClass（'selected'）；
});
选定单元格（）的函数
{
var总和=0；
$（'#myTable td.selected'）。每个（函数（）
{
sum+=parseInt（$（this.html（））；//根据需要切换parseInt（）
});
回报金额；
}

别忘了加入一些CSS，让它看起来很漂亮

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

当然可以做到，但这不是小事如果您想让它与Excel完全一样工作（单击并按住+拖动并释放），这将是一项比最初想象的更复杂的工作

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

而不是

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

就像你想要的那样

要使最后一个选项起作用，您必须实际禁用文本选择（使用

onselectstart

event），然后使用

drag&drop

events以编程方式选择值列中的某些单元格

您还可以使用一种不太直观的方式（与Excel中的工作方式不同）来使用cell

单击事件，从而使您的代码更短、更简单。
下面是一些使用jQuery开始的代码。当然，有很多方法可以改进它
（EDIT:需要检查的一件事是它在IE中的工作情况。我认为您需要在mousedown
事件处理程序中添加类似this.onselectstart=function（）{return false}；
的内容，以禁用IE中的文本选择，但我现在手头没有IE。）

.sel{背景色：#99ff33；}
$（函数（）{
功能col（单元）{
返回cell.parent（）.children（“td”）.index（cell）；
}
var start=null；
功能选择至（单元格）{
if（start==null）
返回；
$（“td”）.removeClass（“sel”）；
变量停止=$（单元）；
var tbl=开始最近的（“表格”）；
var rs=待处理儿童（“待处理体”）。儿童（“tr”）；
var r0=rs.index（start.parent（）），c0=col（start）；
var r1=rs.index（stop.parent（）），c1=col（stop）；
var总和=0；
对于（var i=r0；我很好。为ya添加了一个现场演示：）
     v
| | |x|
| | |x|
| | |x|

<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>