为什么表格多于5行需要两次点击？

Question

I have the problem. I have a page with dropdown menu that contain customers name and if customer name is selected appear table with customer configuration.

Customer can choose row in the table use one click on left mouse button:

When table has more than 5 rows it's style is changed (There is restriction display no more than five rows). And if we press left mouse button in the first time on any field of page, table style is changed (also dropdown menu is unfocused): And it's necessary press left button of the mouse in the second time for select configuration. It is happened only when table has more than five rows. (Table is built by jquery).

Code:

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>

style:

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

response of ajax call: What a reason can be?

Answer 1

滚动类中必须增加宽度。