CODEWITHSUNDEEP
javascripthtmlbootstrap-4delete-rowbootstrap-table
CollegeStudent
CollegeStudent

Reputation: 21

(HTML + JavaScript + BootStrap) Table With Delete Button Won't Show up

Correct Solution with different context | My Solution, table won't show

I can't seem to figure out why my table won't show after I added a new column, any inputs? Sorry if my code is a mess, I'm still learning. I had to tweak my professors lecture examples to figure this out

$(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/[email protected]/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/[email protected]/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>

I've messed with the delete button, placement of lines of code, googling, changing and messing with the table. Can't find anything and I've talked to other struggling students. Same issue

Upvotes: 2

Views: 256

Answers (1)

Layhout
Layhout

Reputation: 1580

your javascript is looking for <tbody> inside the table #OrderTable but it could't find it.

...
$('#OrderTable tbody').append(...)
...

solution:

...
<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>
...

Upvotes: 1

Related Questions