[Ivanizukhty]

Приветствую. Сразу сообщу, что я - дилетант в области JS.
Есть интерактивная карта SVG на HTML-странице. Так же присутствует таблица. При наведении на определенную строку, она подсвечивается определенным цветом, этим же цветом подсвечивается и область на карте, которая соответствует строке в таблице. Скрипт работает только по принципу: одна строка - одна область.

Задача. Необходимо сделать так, что бы при наведении на строку могли подсвечиваться несколько областей на карте.

Скрипт:

<script type="text/javascript">
    // Определим свои функции добавления/удаления класса, так как те, что в jQuery не работают для SVG
    jQuery.fn.myAddClass = function (classTitle) {
      return this.each(function() {
        var oldClass = jQuery(this).attr("class");
        oldClass = oldClass ? oldClass : '';
        jQuery(this).attr("class", (oldClass+" "+classTitle).trim());
      });
    }
    jQuery.fn.myRemoveClass = function (classTitle) {
      return this.each(function() {
          var oldClass = jQuery(this).attr("class");
          var startpos = oldClass.indexOf(classTitle);
          var endpos = startpos + classTitle.length;
          var newClass = oldClass.substring(0, startpos).trim() + " " + oldClass.substring(endpos).trim();
          if (!newClass.trim())
            jQuery(this).removeAttr("class");
          else
            jQuery(this).attr("class", newClass.trim());
      });
    }

    // Логика взаимодействия карты и таблицы
    $(window).load(function () {
      // Получаем доступ к SVG DOM
      var svgobject = document.getElementById('imap');
      if ('contentDocument' in svgobject) {
        var svgdom = jQuery(svgobject.contentDocument);

        // Устанавливаем соответствующим фигурам на карте, соответствующие классы (по таблице)
        $("#data tr").each (function (index) {
          var id = $(this).attr("id").substring(1);
          var classes = $(this).attr("class");
          $("#map #r"+id, svgdom).myAddClass(classes);
        });

        // Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы.
        $("#data tr").hover(
          function () {
            var id = $(this).attr("id").substring(1);
            $("#map #r"+id, svgdom).myAddClass("highlight");
          },
          function () {
            var id = $(this).attr("id").substring(1);
            $("#map #r"+id, svgdom).myRemoveClass("highlight");
          }
        );

        // Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте
        $("#map polygon", svgdom).add($("#map circle", svgdom)).add($("#map path", svgdom)).hover(
          function () {
            var id = $(this).attr("id").substring(1);
            $("#data #d"+id).addClass("highlight");
          },
          function () {
            var id = $(this).attr("id").substring(1);
            $("#data #d"+id).removeClass("highlight");
          }
        );
      }
    });
  </script>

Таблица:

<table id="data">
  <tr id="d1" bgcolor="#000000">
    <td>1</td>
  </tr>
  <tr id="#">
    <td></td>
  </tr>
  <tr id="d2" class="orange">
    <td>2</td>
  </tr>
  <tr id="#" class="red">
    <td></td>
  </tr>
  <tr id="d3" class="purple">
    <td>3</td>
  </tr>
  <tr id="d4" class="green">
    <td>4</td>
  </tr>
  <tr id="d5" class="orange">
    <td>1+2</td>
  </tr>
  <tr id="d6" class="red">
    <td>2+4</td>
  </tr>
  <tr id="d7" class="orange">
    <td>1+2+3+4</td>
  </tr>
</table>

Карта svg:

<path id="r1" d="m 184.31777,877.17469 -7.88283,-6.20564 v -35.89204 l 27.00289,-1.17404 36.56292,3.18668 0.67088,7.37967 -3.18668,9.05687 4.69616,21.46814 -47.46471,3.52211z"></path>
<path id="r2" d="m 245.18111,874.99433 8.10732,28.23148 -16.36623,11.14801 -27.98861,24.43074 -21.34725,-9.96205 -5.6926,-5.21822 -2.60911,-10.19924 -3.32068,-4.50664 5.6926,-11.85959 1.66034,-10.19924 3.79506,-4.03225 0.20582,-5.65264 10.39863,1.34175 z"></path>
<path id="r3" d="m 182.31777,877.17469 -0.20582,5.65264 -3.79506,4.03225 -1.66034,10.19924 -5.6926,11.85959 -6.08904,-0.54784 -9.89547,9.05687 -6.87652,-0.33544 -14.25618,3.3544 -3.3544,-19.79094 11.06951,-15.2625 15.43023,1.67719 14.4239,-8.05055 z"></path>
<path id="r4" d="m 185.31777,877.17469 -10.90179,1.84491 -14.4239,8.05055 -15.43023,-1.67719 -7.21195,-6.37336 -22.8099,-8.38599 10.06319,-6.54107 11.74039,-1.50948 3.18668,-4.02528 0.67088,-4.52843 24.99025,-25.66113 12.24355,6.70879 v 35.89204 z"></path>

Все завязано на уникальный id. Понимаю, что надо привязаться к классам, но не понимаю как это сделать.

Заранее благодарен за помощь!