Question

  Col1  Col2  Col3  Col4  Col5  Col6
  Row11 Row12 Row13 Row14 Row15 Row16
  Row21 Row22 Row23 Row24 Row25 Row26
  Row31 Row32 Row33 Row34 Row35 Row36

我希望在整行或特定行，列组合（Col4）周围添加边框，其中第一列值相等。例如，如果Row11等于Row21，则应该在这两行周围或Row14，Row24周围存在边框。如果有人能提供任何建议，我们将非常感激。

Answer 1

您有 jsp 标记，我假设您正在渲染此表服务器端，并且您描述的逻辑也是服务器端。我可以建议在要突出显示的<td>中添加一个名为“突出显示”的类，然后相应地在CSS中设置样式，例如：

.highlight
{
   border:1px solid #000;
}

Answer 2

迭代每行的第一个单元格以确定单元格内容是否与下一行中第一个单元格的内容“相等”并不难，因此您可以轻松地使用函数返回一个数组匹配的行，例如

// Return an array of arrays of row indexes 
// whose first cell content is equal
function getMatchingRows(table) {
  var rows = table.rows;
  var allMatches = [];
  var currentMatches, currentValue, previousValue;

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    currentValue = getText(rows[i].cells[0]);

    if (currentValue == previousValue) {

      if (!currentMatches) {
        currentMatches = [i-1, i];
      } else {
        currentMatches.push(i);
      }

    } else {
      previousValue = currentValue;

      if (currentMatches) {
        allMatches.push(currentMatches);
        currentMatches = null;
      }
    }
  }
  return allMatches;
}

// Simple function to return element's text content
function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  } else if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}

现在只需将适当的样式应用于单元格，因此您需要一个 hightlighRows 函数，该函数基于行索引数组和 hightlightColumnSegment 高亮显示行。突出显示基于相同行索引数组和单元格索引的单元格（如果要突出显示相邻列和行的块，则可能会突出显示多个单元格索引）。

getText 函数非常简单，但足以满足该示例。

在表中的特定行周围添加边框

2 个答案: