Использование Javascript для «суммирования выбранных ячеек» в IE6 - PullRequest
Новая
       17

Использование Javascript для «суммирования выбранных ячеек» в IE6

3 голосов
/ 30 ноября 2009

В Excel можно выделить диапазон ячеек и просмотреть «сумму» в «строке состояния».

Можно ли это сделать в IE6, используя Javascript и таблицу HTML?

Ответы [ 3 ]

4 голосов
/ 30 ноября 2009

Вот некоторый код для начала работы с использованием 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>

Демо здесь.

2 голосов
/ 30 ноября 2009

Если вы реализуете поведение выделения ячеек, почему бы и нет?

Одним из подходов для этого было бы установить каждую ячейку таблицы (TD) с классом «selected», а когда вы хотите «суммировать» значения, просто просмотрите теги 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 при выборе нескольких ячеек, но это также не должно быть слишком сложным для реализации. Просто помните: обратите внимание на крайние случаи, таких много:)

1 голос
/ 30 ноября 2009

Конечно, это можно сделать, но это не будет тривиальным

Если вы хотите, чтобы он работал точно так же, как в Excel (нажмите и удерживайте + перетащите и отпустите), это будет более сложная работа, чем предполагалось в первый момент.

Вы наверняка будете отображать значения в определенном столбце таблицы, но когда вы выбираете эти значения, браузеры обычно выбирают текст в соответствии с потоком. Это означает, что вы получите выделенный текст, например (v - это столбец value ): 

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

а не 

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

как вы и хотели бы.

Чтобы последний работал, вам нужно отключить выделение текста (используя событие onselectstart), а затем использовать события drag & drop, чтобы программно выделить определенные ячейки в столбце значений.

Вы также можете использовать менее интуитивно понятный способ (который будет работать иначе, чем в Excel) использования событий ячейки click для этого, чтобы сделать ваш код короче и проще.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...