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

时间：2017-10-25 08:03:05

标签： javascript jquery css

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

到目前为止，整个列和整行都被突出显示。

期望的结果是这样的：

enter image description here

我在网上搜索过，但找不到类似的情况。

$(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>

2 个答案:

答案 0 :(得分：3)

您只需使用prevAll功能选择所有以前的兄弟姐妹。请尝试以下方法：

$(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>

答案 1 :(得分：1)

＆＃13;
＆＃13; 
$(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)'
  } ;

  $(table).find("td, tr").removeAttr('style') ;
  $(table).find("td").removeAttr('style') ;


  var i = 0 ; /* Position of <td> in <tr> */

  /* Fill all <td> in the same <tr> */
  var tdElem = $(this) ;
  while($(tdElem).length > 0) {
    $(tdElem).css(styleA) ;

    tdElem = $(tdElem).prev("td") ;
    i++ ;
  }

  /* Fill all <td> in prev <tr> */
  var trElem = $(this).parent("tr").prev() ;
  while($(trElem).length > 0) {
    $(trElem).find("td:nth-child(" + i + ")").css(styleB) ;

    trElem = $(trElem).prev("tr") ;
  }
}) ;

$(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');
  }
}) ;
＆＃13; 
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;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Company</td>
    <td>Contact</td>
    <td>Country</td>
  </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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题