为什么需要双击选择表格中的一行？

大家好。我有一个页面，上面有一个包含客户姓名的下拉列表。当一个客户被选中时，一个表格被动态加载（使用 ajax），其中包含该客户的配置。

通过单击相应的行进行配置的选择：

当表格超过 5 行时，它将滚动，即 有一个滑块（表中的最大行数是五）。当表格超过五行时，它会更改其样式：

为什么会发生这种情况我不知道。如果我们单击表格中的任何行（表格超过 5 行）或通常在页面上的任何区域，首先下拉列表将散焦，然后（或更早）表格将更改其样式：

因此，要在超过 5 行的表格中选择配置，您必须双击。（需要一键选择）

js代码：

function changeCustomerName(customerName) {
        getConfigurationsForSpecifiedCustomer(customerName);
    }

function createTableForConfiguration(data){
    fillTable(data);
    $('#configurationTable').show();
}

function fillTable(data){
    $('#tableBody').empty();
    data.forEach(function(item) {
        $('#tableBody').append(
            '<tr>' +
            '<td style="display:none">' +
            item.id +
            '</td>' +
            '<td>' +
            item.name +
            '</td>' +
            '</tr>'
        )
    });
}

function getConfigurationsForSpecifiedCustomer(customerName) {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/getConfigurationsForSpecifiedCustomer",
        data: JSON.stringify(customerName),
        dataType: 'json',
        success: function(response) {
            createTableForConfiguration(response);
        },
        error: function(e){
            // alert('Error from getConfigurationsForSpecifiedCustomer' + e);
            console.log('Error from getConfigurationsForSpecifiedCustomer' + e);
            $('#configurationTable').hide();
        }
    });
}

$(document).ready(function(){

$('#secondTable').on("click", '#tableBody tr', function(){
    var selected = $(this).hasClass("highlight");
    $("#tableBody tr").removeClass("highlight");
    if(!selected)
        $(this).addClass("highlight");
    $("[name='configuration']").val($(this).context.children[0].innerText);
});

});

html:

 <div id="table" class="scroll">
            <table id="secondTable" class ="tableBorder">
                <thead>
                <tr>
                    <th style="display:none">id</th>
                    <th>Configuration Name</th>
                    <th>Product Name</th>
                    <th>Product Version</th>
                    <th>Solution Build</th>
                    <th>Customer Name</th>
                    <th>GP Code</th>
                    <th>Oracle DB Version</th>
                    <th>Configuration Version</th>
                </tr>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>
        </div>

风格：

body {
    font-size: 1em;
}

h1 {
    font-size: 2em;
}

table.tableBorder {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}

table.tableBorder th, table.tableBorder td {
    padding: 4px 3px;
    border: 1px solid black;
}

.scroll{
    width: 100%;
    max-height: 150px;
    overflow: auto;
}

.highlight { background-color: grey; }

阿贾克斯回应：

Ajax 响应返回一个列表。配置是一个 POJO 类。我注意到，如果您传递一个列表，那么一切正常，表格的样式不会改变，也不需要双击。

响应 ajax 调用的控制器：

@RequestMapping(value = "/getConfigurationsForSpecifiedCustomer", method=RequestMethod.POST)
public @ResponseBody List<Configuration> getConfigurationsForSpecifiedCustomer(@RequestBody String customer) {
    if("".equals(customer))
        return null;
    return configurationService.getConfigurationsOfCustomer(customer.replaceAll("\"", ""));
}

配置类：

@Builder
@AllArgsConstructor
@Data
public class Configuration {
    private final int version;
    private final UUID id;
    private final String name;
    private final String author;
    private final String comment;
    private Map<String, String> customerInfo;
    private Collection<Rule> rules;
    private Collection<WhiteListItem> whiteList;
}

jQuery版本^

/static/js/jquery-2.1.1.min.js

这里有什么问题我无法理解，大脑拒绝。我会很高兴你的建议。