unable to select entire row if rowspan is applied in bootstrap table

Question

I am working on a task where I need to select entire row even if rowspan is applied.

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;}

Current:

If I click on a cell in first row, the Name (Test User 1) and Score (10) is selected.

Expectation:

When I click on any cell in first row, the Name (Test User 1) and All scores cells (10, 22 and 32) should be selected.

Any suggestions is appreciated.

Answer 1

In order to select all rows which are part of a rowspan, you will have to use their own tbody to group them together and then style on the tbody instead.

So, you will have to restructure your table generation a little bit, to enclose all your related rows in a tbody of its own. Just use your .selected class on your tbody and listen for click event on the tbody instead of tr.

Also, because we are now using a tbody, you cannot use bootstrap's table-hover class on table for hovering. Will have to use your user-defined style on tbody.

Example Snippet: (Omitting the Javascript table generation part in this example. Hope you get the idea.)

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