view raw
Vimalan Jaya Ganesh Vimalan Jaya Ganesh - 10 months ago 109
CSS Question

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

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



<table class="table table-bordered table-hover">
<tbody id="DynamicData"></tbody>


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

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

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

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

$('.selectable-row').on('click', function(){




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

enter image description here


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.

enter image description here

Any suggestions is appreciated.


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(){
tbody:hover tr { background-color: #eee;  }
tbody.selected tr { background-color: #acf; }
<link href="" rel="stylesheet"/>
<script src=""></script>
<table class="table table-bordered">
		<tr><td rowspan="3">Test User 1</td><td>10</td></tr>
		<tr><td>Test User 2</td><td>34</td></tr>
		<tr><td rowspan="3">Test User 3</td><td>20</td></tr>