javascript - 如果在 bootstrap 表中应用了 rowspan，则无法选择整行

Question

我正在处理一项任务，即使应用了 rowspan，我也需要选择整行。

fiddle : https://jsfiddle.net/99x50s2s/91/

HTML:

    <table class="table table-bordered table-hover">
        <thead><th>Name</th><th>Score</th></thead>
        <tbody id="DynamicData"></tbody>
    </table>

JS:

var dataList = [];
var dataRow1 = {};
dataRow1.Name = "Test User 1";
dataRow1.Scores = [10, 22, 32];
dataList.push(dataRow1);

var dataRow2 = {};
dataRow2.Name = "Test User 2";
dataRow2.Scores = [34];
dataList.push(dataRow2);

var dataRow3 = {};
dataRow3.Name = "Test User 3";
dataRow3.Scores = [20, 42, 92];
dataList.push(dataRow3);

var dynamicData = $('#DynamicData');

$.each(dataList, function(i, data){
    if (data.Scores.length > 1)
    {
        $.each(data.Scores, function (j, score){
            if (j == 0)
            {
                dynamicData.append('<tr class="selectable-row"><td rowspan="'+data.Scores.length+'">'+data.Name+'</td><td>'+score+'</td></tr>');             }
            else
            {
                dynamicData.append('<tr class="selectable-row"><td>'+score+'</td></tr>'); 
            }
        });
    }
    else if (data.Scores.length == 1)      
    {
        dynamicData.append('<tr class="selectable-row"><td>'+data.Name+'</td><td>'+data.Scores[0]+'</td></tr>');
    }    
});

//event
$('.selectable-row').on('click', function(){
    dynamicData.find('tr').removeClass('selected');
    $(this).addClass('selected');
});

CSS:

.selected{background-color:skyblue;}

电流:

如果我单击第一行中的一个单元格，则会选择名称(测试用户 1)和分数 (10)。

期望:

当我单击第一行中的任何单元格时，应选择名称(测试用户 1)和所有分数单元格(10、22 和 32)。

如有任何建议，我们将不胜感激。

Answer 1

为了选择属于 rowspan 的所有行，您必须使用它们自己的 tbody 将它们组合在一起，然后在 上设置样式tbody 代替。

因此，您将不得不稍微重组您的表格生成，以将所有相关行包含在它自己的 tbody 中。只需在 tbody 上使用您的 .selected 类并在 tbody 而不是 上监听 click 事件tr。

此外，因为我们现在使用的是 tbody，所以您不能在 table 上使用 bootstrap 的 table-hover 类进行悬停。必须在 tbody 上使用您的用户定义样式。

示例片段:(在此示例中省略了 Javascript 表生成部分。希望您能理解。)

$('table').on('click', 'tbody', function(){
    $('table').find('tbody').removeClass('selected');
    $(this).addClass('selected');
});

tbody:hover tr { background-color: #eee;  }
tbody.selected tr { background-color: #acf; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
	<tbody>
		<tr><td rowspan="3">Test User 1</td><td>10</td></tr>
		<tr><td>22</td></tr>
		<tr><td>32</td></tr>
	</tbody>
	<tbody>
		<tr><td>Test User 2</td><td>34</td></tr>
	</tbody>	
	<tbody>
		<tr><td rowspan="3">Test User 3</td><td>20</td></tr>
		<tr><td>42</td></tr>
		<tr><td>92</td></tr>
	</tbody>
</table>

fiddle :http://jsfiddle.net/abhitalks/52jjtoy6/