如何展示封面并将其放在特定位置？

Question

有一个从ajax动态填充的html表:(这是一个非常简单的捕获）

当我单击表格的一个单元格时，除了标题c1到c4之外，我想要显示一个封面，隐藏单击单元格左侧的单元格:(这是一个非常简单的捕获我手工制作的油漆）

在这个例子中，我点击了列c3中的一个单元格。那么如何展示封面？

Answer 1

$(document).ready(function() {

    $('table tr td').on('click', function() {
        $('table tr td').removeClass('selected');
        var _index = $(this).index();
        $('table tr').each(function(index) {
            if (index > 0) { // all but not header
                $(this).find('td').each(function() {
                    if ($(this).index() < _index) {
                        $(this).addClass('selected');
                    }
                });
            }
        });
    });

});

这样的东西？

$(document).ready(function(){
	
	$('table tr td').on('click', function(){
		$('table tr td').removeClass('selected');
		var _index = $(this).index();
		$('table tr').each(function(index){
			if (index>0) { // all but not header
				$(this).find('td').each(function(){
					if ($(this).index() < _index) {
						$(this).addClass('selected');
					}
				});
			}
		});
	});

});

td {
	border: solid 1px #000;
}

td.selected {
	color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td>c1</td>
		<td>c2</td>
		<td>c3</td>
		<td>c4</td>
	</tr>
	<tr>
		<td>d1</td>
		<td>d2</td>
		<td>d3</td>
		<td>d4</td>
	</tr>
	<tr>
		<td>d1</td>
		<td>d2</td>
		<td>d3</td>
		<td>d4</td>
	</tr>
	<tr>
		<td>d1</td>
		<td>d2</td>
		<td>d3</td>
		<td>d4</td>
	</tr>
	<tr>
		<td>d1</td>
		<td>d2</td>
		<td>d3</td>
		<td>d4</td>
	</tr>
	<tr>
		<td>d1</td>
		<td>d2</td>
		<td>d3</td>
		<td>d4</td>
	</tr>
</table>

Answer 2

根据评论更新

不是循环遍历很多元素，而是使用索引值向表本身添加一个类，然后您可以轻松设置一些CSS规则来处理样式。

然后，您可以使用伪来覆盖每个单元格，如此

＆＃13;

＆＃13;

$(document).ready(function() {
  $('table').on('click', function(e) {
    $(this).attr('class', 'idx' + $(e.target.parentElement).children().index(e.target));
  });
});

＆＃13;

td {
  position: relative;
  border: 1px solid gray;
}

table.idx0 td:nth-child(-n+0)::after,
table.idx1 td:nth-child(-n+1)::after,
table.idx2 td:nth-child(-n+2)::after,
table.idx3 td:nth-child(-n+3)::after,
table.idx4 td:nth-child(-n+4)::after,
table.idx5 td:nth-child(-n+5)::after {
  content: '';
  position: absolute;
  left: -2px;                              /* 2px to make up for border/padding */
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>c1</th>
    <th>c2</th>
    <th>c3</th>
    <th>c4</th>
    <th>c5</th>
    <th>c6</th>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

或者只是将颜色和背景设置为相同

＆＃13;

＆＃13;

$(document).ready(function() {
  $('table').on('click', function(e) {
    $(this).attr('class', 'idx' + $(e.target.parentElement).children().index(e.target));
  });
});

＆＃13;

td {
  border: 1px solid gray;
}

table.idx0 td:nth-child(-n+0),
table.idx1 td:nth-child(-n+1),
table.idx2 td:nth-child(-n+2),
table.idx3 td:nth-child(-n+3),
table.idx4 td:nth-child(-n+4),
table.idx5 td:nth-child(-n+5) {
  background: black;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>c1</th>
    <th>c2</th>
    <th>c3</th>
    <th>c4</th>
    <th>c5</th>
    <th>c6</th>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;