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

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

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

// 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突出显示基于相同行索引数组和单元格索引的单元格(或者如果您想突出显示相邻列和行的 block ，则可能是多个单元格索引)。

getText 函数非常简单，但对于示例来说已经足够了。