提交按钮后如何显示表格

问题描述 投票：0回答：2

我正在使用 laravel，并且我已经使用 css 隐藏了表格。之后，我使用 javascript 来显示我正在关注的表格...这是我到目前为止所做的：

function checkData() {
    var button = document.getElementById("submit");
    var table = document.getElementById("controlTable");

// Then, add an event listener to the button
    button.addEventListener("click", function() {
    // When the button is clicked, show the table
    table.style.display = "block";
    });
    return button;

#controlTable{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }} Page </title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body>
    @yield('body')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="{{asset('js/index.js') }}"></script>
</body>
</html>

<!-- Table Section -->
    <div class="row mt-3">
        <div class="col-12">
            <table class="table table-bordered border border-secondary" id="controlTable">
                <tr>
                    <th>Client Name</th>
                    <th>January</th>
                    <th>February</th>
                    <th>March</th>
                    <th>April</th>
                    <th>May</th>
                    <th>June</th>
                    <th>July</th>
                    <th>August</th>
                    <th>September</th>
                    <th>October</th>
                    <th>November</th>
                    <th>December</th>
                </tr>
                @foreach ($calculates as $calculate)
                <tr>
                    <td>{{ $calculate->client_candidate }}</td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" type="submit">ON TIME</button>
                        <button class="btn btn-warning" type="submit">LATE</button>
                    </td>
                </tr>
                @endforeach
            </table>
        </div>
    </div>

当我尝试这样做时，表格甚至没有显示。我已经按照教程很多次了，我尝试了但仍然不起作用。现在我陷入困境，我不知道我的代码出了什么问题。请帮助我。

javascript html css laravel
2个回答
1
投票

删除 CSS 中的 

display:none
，然后在表格中添加 
d-none

<table class="table table-bordered border border-secondary d-none" id="controlTable">

由于 bootstrap，这会给你的桌子带来 

display:none
风格

接下来是在元素中使用切换

var table = document.getElementById("controlTable");
... // some code here
button.addEventListener("click", function() {
    table.classList.toggle("d-none");
});

每次单击按钮时，都会切换/添加/删除类“d-none”。

0
投票

您可以在有表格的div上添加id并不显示它，并在提交按钮上添加id并使用jquery显示。

<div class="col-12" id="table" style="display:none;">
  <button class="btn btn-warning" id="show" type="submit">LATE</button>
</div>
 <script>
    $("#show").click(function() {
        $("#table").show();
    });
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.