(HTML + JavaScript + BootStrap) 带有删除按钮的表格不会显示
[英](HTML + JavaScript + BootStrap) Table With Delete Button Won't Show up
问题描述
我似乎无法弄清楚为什么我的表格在添加新列后不显示，有任何输入吗？ 对不起，如果我的代码一团糟，我还在学习。 我不得不调整我教授的讲座示例来解决这个问题
$(document).ready(function() { $('#AddSaleButton').click(function() { var PlayerName = $('#PlayerName').val(); var Goals = parseInt($('#GoalNum').val()); var Assists = parseInt($('#AssistQuantity').val()); $('#OrderTable tbody').append('<tr><td>' + PlayerName + '</td><td>' + Goals + '</td><td>' + Assists + '</td><td></td><td><button class="btn btn-sm btn-danger DeleteRow" data-product="' + PlayerName + '" data-quantity="' + Goals + 'data-assist="' + Assists + '>Delete Order</button></td></tr>'); switch (PlayerName) { case "Erling": var EachPlayerSum = parseInt($('#ETotal').text()); EachPlayerSum = EachPlayerSum + Goals + Assists; var TotalEveryone = parseInt($('#TotalEveryone').text()); TotalEveryone = TotalEveryone + Goals + Assists; $('#ETotal').text(EachPlayerSum); $('#TotalEveryone').text(TotalEveryone); break; case "Phil": var EachPlayerSum = parseInt($('#PTotal').text()); EachPlayerSum = EachPlayerSum + Goals + Assists; var TotalEveryone = parseInt($('#TotalEveryone').text()); TotalEveryone = TotalEveryone + Goals + Assists; $('#PTotal').text(EachPlayerSum); $('#TotalEveryone').text(TotalEveryone); break; case "Jack": var EachPlayerSum = parseInt($('#JTotal').text()); EachPlayerSum = EachPlayerSum + Goals + Assists; var TotalEveryone = parseInt($('#TotalEveryone').text()); TotalEveryone = TotalEveryone + Goals + Assists; $('#JTotal').text(EachPlayerSum); $('#TotalEveryone').text(TotalEveryone); break; } $('AddSaleModal').modal('hide'); $('#AddOrderToast').show(); $('#GoalNum').val(''); $('#AssistQuantity').val(''); $('#PlayerName').prop('selectedIndex', 0); setTimeout(function() { $('#AddOrderToast').hide(); }, 3000); }); $(document).on('click', '.DeleteRow', function() { var PlayerName = $(this).attr('data-product'); var Goals = parseInt($(this).attr('data-quantity')); var Assists = parseInt($(this).attr('data-assist')); switch (PlayerName) { case "Erling": var EachPlayerSum = parseInt($('#ETotal').text()); EachPlayerSum = EachPlayerSum - Goals - Assists; var TotalEveryone = parseInt($('#TotalEveryone').text()); TotalEveryone = TotalEveryone - Goals - Assists; $('#ETotal').text(EachPlayerSum); $('#TotalEveryone').text(TotalEveryone); break; case "Phil": var EachPlayerSum = parseInt($('#PTotal').text()); EachPlayerSum = EachPlayerSum - Goals - Assists; var TotalEveryone = parseInt($('#TotalEveryone').text()); TotalEveryone = TotalEveryone - Goals - Assists; $('#PTotal').text(EachPlayerSum); $('#TotalEveryone').text(TotalEveryone); break; case "Jack": var EachPlayerSum = parseInt($('#JTotal').text()); EachPlayerSum = EachPlayerSum - Goals - Assists; var TotalEveryone = parseInt($('#TotalEveryone').text()); TotalEveryone = TotalEveryone - Goals - Assists; $('#Jtotal').text(EachPlayerSum); $('#TotalEveryone').text(TotalEveryone); break; } var tableRow = $(this).closest('tr'); //parent parent works too instead of closest tableRow.remove(); $('#DeleteOrderToast').show(); setTimeout(function() { $('#DeleteOrderToast').hide(); }, 3000); }); });
<,DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta name="theme-color" content="#ffca1c"> <meta name="mobile-web-app-capable" content="yes"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> <script src="script.js"></script> <title>Manchester City Soccer Team</title> </head> <body class="bg-light"> <div class="container-lg mt-5"> <div class="row mb-3 text-center"> <h1>Manchester City Soccer Team</h1> </div> <div class="row mb-3 w-50 mx-auto"> <button class="btn btn-primary OpenSaleModal" data-bs-toggle="modal" data-bs-target="#AddSaleModal">Add Statistics</button> </div> <table class="table table-border table-hover table-sm= mb-5" id="OrderTable"> <thead> <tr> <th>Player's Name</th> <th>Number of Goals</th> <th>Number of Assists</th> <th></th> </tr> </thead> </table> <div class="row d-flex flex-row justify-content-start text-center"> <div class="col-3"> <div class="card"> <div class="card-header">Erling Total</div> <div class="card-body"> <div class="display-1 fw-bold" id="ETotal">0</div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-header">Phil Total</div> <div class="card-body"> <div class="display-1 fw-bold" id="PTotal">0</div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-header">Jack Total</div> <div class="card-body"> <div class="display-1 fw-bold" id="JTotal">0</div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-header">Total Together</div> <div class="card-body"> <div class="display-1 fw-bold" id="TotalEveryone">0</div> </div> </div> </div> </div> </div> <.-- TOASTS --> <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3"> <div class="toast align-items-center text-bg-success border-0" id="AddOrderToast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex justify-content-between align-items-center"> <div class="toast-body fs-6"> You successfully added data. </div> <button type="button" class="btn-close pe-3" data-bs-dismiss="toast" aria-label="Close"></button> </div> </div> </div> <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3"> <div class="toast align-items-center text-bg-success border-0" id="DeleteOrderToast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex justify-content-between align-items-center"> <div class="toast-body fs-6"> You successfully removed data. </div> <button type="button" class="btn-close pe-3" data-bs-dismiss="toast" aria-label="Close"></button> </div> </div> </div> <.-- Modal - Add Stats --> <div class="modal fade" id="AddSaleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add a New Statistic</h5> <button type="button" id="CloseEditClientModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label for="PlayerName" class="form-label">Choose A Player</label> <select class="form-select" aria-label="Default select example" id="PlayerName"> <option selected>Select from list...</option> <option value="Erling">Erling Haaland</option> <option value="Phil">Phil Foden</option> <option value="Jack">Jack Grealish</option> </select> <div class="invalid-feedback"> Please select a Player. </div> </div> <div class="mb-3"> <label for="GoalNum" class="form-label">Goals</label> <input type="number" min="0" class="form-control" id="GoalNum"> <div class="invalid-feedback"> Please enter a Goal number. </div> <div class="mb-3"> <label for="AssistQuantity" class="form-label">Assists</label> <input type="number" min="0" class="form-control" id="AssistQuantity"> <div class="invalid-feedback"> Please enter an Assist number. </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="AddSaleButton">Save Statistics</button> </div> </div> </div> </div> </body> </html>
我弄乱了删除按钮、代码行的放置、谷歌搜索、更改和弄乱表格。 找不到任何东西，我已经和其他苦苦挣扎的学生谈过了。 同样的问题
1 个解决方案
解决方案1
1 2022-11-28 03:25:59
您的 javascript 正在表#OrderTable中寻找<tbody>但找不到。
...
$('#OrderTable tbody').append(...)
...
解决方案：
...
<table class="table table-border table-hover table-sm= mb-5" id="OrderTable">
<thead>
<tr>
<th>Player's Name</th>
<th>Number of Goals</th>
<th>Number of Assists</th>
<th></th>
</tr>
</thead>
<tbody></tbody> <!-- 👈 add this line -->
</table>
...
HTML // CSS // JavaScript：按钮或输入未显示在网络上
[英]HTML // CSS // JavaScript : button or input doesn't show up on web
Javascript 随机引用 - 有效，但为什么按钮不会出现在这个 Div 中？
[英]Javascript Random Quote - Works, but why won't the button show up in THIS Div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.