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

Add border around specific rows in a Table

本文关键字：周围 添加 边框      更新时间：2023-09-26
  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周围有边框。如果有人能提供任何关于相同的建议，我将非常感谢。

遍历每行的第一个单元格以确定单元格内容是否与下一行的第一个单元格内容"相等"并不难，因此您可以很容易地使用一个函数来返回匹配行的数组，例如

// 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函数非常简单，但对于示例来说已经足够了。

您有一个jsp标记，我假设您是在服务器端呈现这个表，您所描述的逻辑也是服务器端。我可以建议在你想要高亮的<td>上添加一个名为"highlight"的类，然后在你的CSS中相应地设置它的样式，例如:

.highlight
{
   border:1px solid #000;
}
相关文章：