jQuery：查找表值答案

【问题标题】：jQuery: Look up table valuejQuery：查找表值
【发布时间】：2010-09-06 02:53:08
【问题描述】：

我正在尝试创建一个表作为查找表。通常，我会做这个服务器端，但在这种情况下，我只有一个 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 属性似乎再次使这些解决方案变得丑陋。

编辑：正确在 tr 标记而不是 td 标记上具有第二个 rowspan 属性编辑：尝试通过示例部分澄清您可能会查找任何行

【问题讨论】：

所以您只需要每个“val1”和“val2”部分下的第一行值吗？（例如：如果 val1 和 1 存在，则 val1 仅使用“2”？如果 val2 和 4 存在，val2 仅使用数字 5 进行计算？）第二个行跨度是否有错字？（应该在 td 标签中，对吗？）

标签： jquery html-table lookup

【解决方案1】：

我认为最好的方法（除了使用表单数据服务器端）是使用 jQuery 直接在表单数据提交之前处理表单数据，而不是使用 HTML 结果。

但是，如果您无法控制它，这会将每个“val#”行跨度的“C”列值的第一行带入一个由每个“val#”字符串键入的对象，您可以在其中使用它（通过例如 for in 循环）。您应该在表格标签中添加一个“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
  }
});

【讨论】：