tableのrowspanになっている行3行以上をまとめてhoverしたい

Question

###前提・実現したいこと

1. rowspanの行すべてを一度にhoverしたい。(4行分とか)
2. rowspanの値はまちまちである。
3. ソートを使用しているのでtbodyで区切ることができない。

現状

tr部分のみがhoverになる。

該当のソースコード

//html//
<table id="t_company" class="cl_table1">
<colgroup>
<col style="width:8em;"/>
<col style="width:20em;"/>
<col style="width:20em;"/>
<col style="width:16em;"/>
<col style="width:10em;"/>
<col style="width:6em;"/>
<col style="width:10em;"/>
<col style="width:10em;"/>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>会社名</th>
<th>メール</th>
<th>会員番号</th>
<th>ID</th>
<th>xxx</th>
<th>日付</th>
<th>契約</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">1234556</a></td>
<td ><a href="#">XXXXXXX株式会社</a></td>
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>
<tr>
<td rowspan="4"><a href="#">1234556</a></td>
<td rowspan="4"><a href="#">XXXXXXX株式会社</a></td>
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>
<tr class="expand-child">
<td>XXXXXXX株式会社</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>11111111111111</td>
<td>40</td>
<td>&nbsp;</td>
<td>お手続き中</td>
</tr>
<tr class="expand-child">
<td>XXXXXXX株式会社</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>11111111111111</td>
<td>40</td>
<td>&nbsp;</td>
<td>お手続き中</td>
</tr>
<tr class="expand-child">
<td>XXXXXXX株式会社</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>11111111111111</td>
<td>40</td>
<td>&nbsp;</td>
<td>お手続き中</td>
</tr>
<tr>
<td rowspan="2">123456</td>
<td rowspan="2">XXXXXXX株式会社</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>
<tr class="expand-child">
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>
<tr>
<td><a href="#">1234556</a></td>
<td ><a href="#">XXXXXXX株式会社</a></td>
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>
</tbody>
</table>

//Java//
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>

<script>
$(".cl_table1 tr").hover(
    function(){
        var rowCell = $(this).find('td[rowspan]');
        var rowValue = rowCell.attr('rowspan');
        rowCell.closest('tr').nextAll(':lt(' + (rowValue - 1) + ')'.addClass('rowhover');
    },
    function(){
        $(".cl_table1 tr").removeClass("rowhover");
    }
);	
</script>

//css//
#t_company{
margin:0 0 10px 0;
}
.cl_table1{
font-size:12px;
clear:both;
border-collapse:collapse;
width:100%;
}
.cl_table1 tbody{
color:#fff;
}
.cl_table1 tr:hover,
.cl_table1 tr:active{
background:#1e90ff;
}
.cl_table1 td a{
display:block;
width:100%;
height:100%;
cursor:pointer;
}
.cl_table1 th{
padding:6px 3px;
text-align:left;
background:#000080;
border-bottom:1px solid #ccc;
}
.cl_table1 td{
padding:3px 5px;
border-bottom:1px dotted #ccc;
}

Answer 1

パッと思いつくのは出力時にhoverさせたいまとまりで共通のクラス名をつけてセレクタでまとめて取得する方法ですかね。id列ユニークが前提ですが。
例

<tr class="id_12345678">
<td rowspan="2">12345678</td>
<td rowspan="2">XXXXXXX株式会社</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>
<tr class="expand-child id_12345678">
<td>xxxxxxxxxxxxxxxx</td>
<td>vvvvvvvvvvvvv</td>
<td>11111111111111<br />22222222222</td>
<td>330</td>
<td>2018/01/01</td>
<td>ご契約中</td>
</tr>

$(".cl_table1 tr").hover(
    function(){
        console.log($("."+$(this).attr("class").replace("expand-child","").trim()));
        $("."+$(this).attr("class").replace("expand-child","").trim()).addClass("rowhover");
    },
    function(){
        $(".cl_table1 tr").removeClass("rowhover");
    }
); 

.rowhover,
.cl_table1 tr:hover,
.cl_table1 tr:active{
background:#1e90ff;
}

Answer 2

できるだけ仕組みを単純化する方法を考えてみました. が, なかなかエレガントな構成にするのは難しいですね.

<table data-selected="1" id="table">
	<tr data-rowg="1"><td rowspan="3">a</td><td>a</td><td>a</td><td>a</td></tr>
	<tr data-rowg="1"><td>a</td><td>a</td><td>a</td></tr>
	<tr data-rowg="1"><td>a</td><td>a</td><td>a</td></tr>
	<tr data-rowg="2"><td rowspan="2">a</td><td>a</td><td>a</td><td>a</td></tr>
	<tr data-rowg="2"><td>a</td><td>a</td><td>a</td></tr>
</table>

table{
	width:100%;
	border-collapse: collapse;
}
/*この部分の動的生成を要する*/
table[data-selected="1"]:hover tr[data-rowg="1"],
table[data-selected="2"]:hover tr[data-rowg="2"]{
	background-color:yellow;
}

table.onmousemove = e => {
	const tr = e.target.closest("tr");
	tr && (table.dataset.selected = tr.dataset.rowg);
}

• HTMLには行グループであることを示す属性を追加しておく(ここではdata-rowg)
• CSSにはテーブルでの選択行と行グループが一致した際のスタイルを指定しておく.
• JavaScriptではマウスホバー時の行グループ番号をtable要素に設定する.

課題

• スタイルシートの動的出力を要する.(テーブルが可変行数の場合はこの部分が書き換わる)

Answer 3

たとえば以下のように、rowspanというものは列ごとに処理がわかれるため
任意の複数行を選ぶことはできません

こういう場合は、こうというような細かい仕様がなければ
ぼやっとした要求定義だけされても実装は難しいとおもいます

<style>
tr:hover{
  background-Color:yellow;
}
</style>
<table border>
<tr>
<td>x</td>
<td rowspan=2>x</td>
<td>x</td>
<td>x</td>
<td rowspan=4>x</td>
</tr>
<tr>
<td>x</td>
<td rowspan=3>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td rowspan=2>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
</tr>
</table>