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

问题描述

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

客户可以通过鼠标左键一键选择表格中的行：

当表格超过 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 调用的响应：可能是什么原因？

标签： javascriptjavajqueryhtml

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

问题描述

解决方案

推荐阅读