Question

我有问题。我有一个带有下拉菜单的页面，其中包含客户名称，如果选择了客户名称，则显示包含客户配置的表格。

客户可以在表格中选择行，只需单击鼠标左键：

当表格超过5行时，它的样式会发生变化（限制显示不超过5行）。如果我们第一次在页面的任何一个字段上按下鼠标左键，表格样式就会改变（下拉菜单也没有聚焦）：并且必须在第二次按下鼠标左键进行选择配置。只有当表格超过五行时才会发生这种情况。（表由jquery构建）。

代码：

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电话的回复：可能是什么原因？

Answer 1

滚动类必须增加宽度。

为什么表格超过5行时需要点击两次？

1 个答案: