Using Javascript to 'sum selected cells' in IE6_问答_开发者

Using Javascript to 'sum selected cells' in IE6

开发者 https://www.devze.com 2022-12-12 17:43 出处：网络

In excel it is possible to highlight a range开发者_JAVA百科 of cells and view the \'sum\' in the \'status bar\'.

In excel it is possible to highlight a range开发者_JAVA百科 of cells and view the 'sum' in the 'status bar'.

Can this be done in IE6 using Javascript and a HTML table ?

Here is some code to get you started, using jQuery. Of course there are many ways you could improve on it.

(EDIT: One thing to check is how well it works in IE. I think you need to add something like this.onselectstart = function() {return false}; in the mousedown event handlers to disable text selection in IE, but I don't happen to have IE handy at the moment.)

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

If you implement the behavior of selecting the cells, sure, why not?

One approach to do this would be to set each cell of the table (TD) with the class "selected" and when you wish to 'sum' the values, just go over the table's TD tags, read their values and display the result wherever you wish.

Using jQuery this should be a snap (relatively speaking). Example:

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

Don't forget to throw in some CSS to make it look nice.

A more sophisticated and advanced solution would be to use the mousedown/mouseup to emulate the multiple cell selection behavior of excel, but this too shouldn't be too hard to implement. Just remember: mind the edge cases, there are a lot of those :)

Sure it can be done, but it won't be trivial

If you want it to work exactly as in Excel (click & hold + drag & release) this will be a more complex job than thought at the first moment.

You will most certainly display values in a certain column in your table, but when you select those values, browsers usually select text according to flow. Meaning you will get selected text like (v is the value column):

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

and not

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

as you would actually want.

For the last one to make it work, you'll have to actually disable text selection (using onselectstart event), and then use drag & drop events to programatically select certain cells in your values column.

You could also use a less intuitive way (that will work differently as in Excel) of using cell click events for this to make you code shorter and simpler.