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

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

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

Источник

3 ответа

Решение

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

Демо здесь.

Источник

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

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

Источник

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

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

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

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

и не

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

как вы на самом деле хотите.

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

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

Источник
Другие вопросы по тегам