<!DOCTYPE html>
<html>
<head>
<style>
.selectcolor{
background: green;
color: #fff;
}
</style>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('click', '.table', function(e) {
if($(this).find("td").hasClass('selectcolor')){
$(this).find("td").removeClass('selectcolor');
}
$(e.target).closest('tr').children('td,th').addClass('selectcolor');
});
$(document).on('click', 'tr.a', function(){
if($(this).children('td').hasClass('selectcolor')== false){
$(this).siblings('tr').children('td').children('div').slideUp('slow');
$(this).siblings('tr.mact').slideUp('slow');
}
if($(this).next('tr').children('td').children('div').length<=0){
$('<tr class="mact" style="display: none"><td><div style="display: none;"><table border="2" ><tr><td>hihihisdfsd</td></tr><tr><td>hihihisdfsd</td></tr><tr><td>hihihisdfsd</td></tr></table></div></td></tr>').insertAfter(this);
$(this).next('tr').slideToggle("slow");
$(this).next('tr').children('td').children('div').slideToggle("slow");
}else{
$(this).next('tr').slideToggle("slow"); $(this).next('tr').children('td').children('div').slideToggle("slow");
}
});
</script>
</head>
<body class="siblings">
<table border='2' class='table'>
<tr class='a'>
<td >1dasdasdasdas</td>
</tr>
<tr class='a'>
<td >2dasdasda</td>
</tr>
<tr class='a'>
<td >3sadasdasdasd</td>
</tr>
</table>
</body>
</html>
