Use Javascript to "add the selected cells" in IE6


In excel it is possible to highlight a range 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.)

<style type="text/css">
    .sel {background-color: #99ff33; }
<script type="text/javascript" src=""></script>
$(function () {
    function col(cell) {
        return cell.parent().children("td").index(cell);

    var start = null;

    function selectTo(cell) {
        if (start == null)
        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));
                sum += Number(cell.html());

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

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

    $("td").mouseover(function () {

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

    $("body").mouseup(function () {
        start = null;

    <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>
  <p>Total of selected elements: <span id="total"></span></p>


Demo here.