jQuery: поиск значения таблицы

Question

Я пытаюсь создать, чтобы использовать таблицу в качестве справочной таблицы.Обычно я делаю это на стороне сервера, но в этом случае у меня просто есть таблица html, и таблица будет вводиться клиентом.

В основном, при заполнении формы они дают мне два значения, которыенаходятся в столбцах A и B. Затем форма должна выполнить вычисление, используя соответствующее значение в столбце C. Столбец A повторяется несколько раз, вместо того, чтобы вводить его несколько раз, используется атрибут rowspan, что, кажется, действительно усложняет это, но это было бы большим изменением (возможно, но я бы предпочел этого избежать).

Упрощенная версия:

<table>
  <thead>
    <tr><th>Column A</th><th>Column B</th><th>Column C</th></tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">val1</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>3</td>     
    </tr>
    <tr>
      <td rowspan="2">val2</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>10</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

Так что, если они введут: val1 и1 -> 2 val2 и 4 -> 5 val2 и 10 -> 15

Единственная идея, которую я имею, - сначала проанализировать таблицу во вложенном массиве, а затем использовать ее.Кажется, это работает, но я хотел бы узнать мнение других о том, как лучше всего с этим справиться.Если бы я мог просто запросить / отфильтровать на основе DOM, мне бы показалось, что он бы использовал меньше памяти, но опять-таки атрибут rowspan делает эти решения уродливыми.

Редактировать: исправить, добавив второй атрибут rowspan в тег trвместо тегов td Edit: попытался прояснить в разделе с примерами, что вы потенциально можете найти любую строку

Answer 1

Я думаю, что лучший способ (кроме работы с сервером данных формы) - использовать jQuery для прямой работы с данными формы до отправки, а не работы с результатом HTML.

Но если у вас нет никакого контроля над этим, это приведет к тому, что первая строка для каждого значения столбца "C #" в строке "val #" будет преобразована в объект, снабженный каждой строкой "val #", где вы можете работать с ней (через например, в цикле). Вы должны добавить атрибут "id" (например, id = "myTable") в тег таблицы, потому что это оптимизирует селектор jQuery.

$(window).ready(function() {
  var vals = {}, $table = $('#myTable');

  $table.find('td[rowspan]').each(function(i,e) {
    $(e).siblings().each(function(j,s) {
      var html = e.innerHTML, key = (html.match(/^[a-z0-9]+$/)) ? html : i.toString();

      vals[key] = parseInt($(s).html(), 10);
    });
  });

  for(var val in vals) {
    if(!vals[val]) continue;

    vals[val] = vals[val] + 20;

    alert(vals[val]); // alerts 22, then 25
  }
});