jquery - 如何显示封面并将其放置在特定位置？

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



当我单击表格的一个单元格时，除了标题c1到c4之外，我想显示一个封面，将被单击的单元格左侧的单元格隐藏起来：（这是我从绘画中手动完成的非常简单的捕获）



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

最佳答案

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

关于jquery - 如何显示封面并将其放置在特定位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43696122/