javascript - 如何突出显示从顶部到第 n 行的列

Question

我试图突出显示表格中从顶部到选定单元格以及从左侧到选定单元格的列和行。

到目前为止，我已经突出显示了整列和整行。

期望的结果是这样的:

我在网上搜索了一下，没有找到类似的案例。

$(document).on('click', "td", function(event) {

  var table = 'table'
  var styleA = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'
  };
  var styleB = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'outline': ' 3px solid #086aa7'
  };

  $(table).find("td,tr").removeAttr('style');
  $(table).find("td").removeAttr('style'); 
  //$(this).parent('tr').css(styleA);
  $(this).parent('tr').find('td').css(styleA);
  $('td:eq(' + this.cellIndex + ')', 'tr').css(styleA); 
  $(this).css(styleB);
});

$(document).mouseup(function(e) {
  var container = $("table");
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $("table").find("tr,td").removeAttr('style');
    $("table").find("td").removeAttr('style');
  }
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

table td[contentEditable=true] {
  box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51);
  outline: 3px solid #086AA7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus </td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari </td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 1

您只需要使用 prevAll 函数来选择所有 previous sibling 姐妹。尝试以下操作:

$(document).on('click', "td", function(event) {

  var table = 'table'
  var styleA = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'
  };
  var styleB = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'outline': ' 3px solid #086aa7'
  };

  $(table).find("td,tr").removeAttr('style');
  $(this).prevAll().css(styleA);
  $(this).parent().prevAll().find('td:eq(' + this.cellIndex + ')', 'tr').css(styleA); 
  $(this).css(styleB);
});

$(document).mouseup(function(e) {
  var container = $("table");
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $("table").find("tr,td").removeAttr('style');
  }
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

table td[contentEditable=true] {
  box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51);
  outline: 3px solid #086AA7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus </td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari </td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>