如果在 Bootstrap 表格中应用了 rowspan，就无法选择整行。

Question

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

示例：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;}

现状:

如果我点击第一行的单元格，姓名（Test User 1）和得分（10）会被选中。

期望:

当我点击第一行的任何单元格时，姓名（Test User 1）和所有得分单元格（10、22和32）都应该被选中。

欢迎提出任何建议。

- JGV

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/

- Abhitalks

---

是的，我明白了并且能够在我的应用程序中应用它。我观察到的一件事是，由于我们将行包装在tbody中，边框现在变得更厚了。但是，我将能够调整CSS并修复它们。 - JGV

@VimalanJayaGanesh：是的。这是来自Bootstrap的样式。具体来说，您需要覆盖此规则 - .table>tbody+tbody { border-top: 2px solid #ddd; } - Abhitalks

Answer 2

看这个例子： https://jsfiddle.net/99x50s2s/93/

基本上，你需要计算行跨度的数量，并相应地应用选定的类：

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

// Find span count in first td. Select next rows.
var spanCount = $(this).find('td:first').attr('rowspan');
$(this).nextAll().slice(0, spanCount - 1).addClass('selected');

});

- Jim Ma

Answer 3

没有必要写那么多的JS，只需使用CSS就可以轻松实现效果。 以下是代码，请根据您的需要进行编辑。

CSS：

.student{border:1px solid #ccc; width:300px;font-family:sans-serif;font-size:15px;}
.student .name{ width:99px; height:inherit}
.student .score
{
width:200px;
border-left:1px solid #eee;
}
.score table{ width:100%}
.score td{ border-top:1px solid #CCC;}
.score table tr:first-child td{ border-top:1px solid transparent;}
.student:hover{background:#EEE}
.name,.score{float:left}
.student:after{display:block;content:""; clear:both; height:1px}


<div class='student'>
<div class='name'>Test User1</div>  
<div class='score'>
        <table>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>         
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        </table>
    </div>
</div>
<div class='student'>
<div class='name'>Test User1</div>  
<div class='score'>
        <table>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>         
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        </table>
    </div>
</div>
<div class='student'>
<div class='name'>Test User1</div>  
<div class='score'>
        <table>
        <tr><td>1</td></tr>         
        </table>
    </div>
</div>
<div class='student'>
<div class='name'>Test User1</div>  
<div class='score'>
        <table>
        <tr><td>1</td></tr>         
        <tr><td>1</td></tr>         
        <tr><td>1</td></tr>         
        <tr><td>1</td></tr>         
        <tr><td>1</td></tr>         

        </table>
    </div>
</div>

- CodeRomeos