CODEWITHSUNDEEP
javascriptjqueryhtml
Paul
Paul

Reputation: 312

Adding text input to table

I am trying to make the value of the input with the name "game-name" to be in the "Name of the game" column of the table when I click on the "add game" button. Also the delete button does not work.

Here is my code: 

$(function() {
  var $td = '<td>' + '</td>';

  $('input[name=add-game]').click(function() {
    $('tbody').append('<tr>' + $td + $td + $td + '</tr>');

    var $tableRows = $('tbody tr').length
    $('tbody tr').eq($tableRows).children().eq(0).text($('input[name=game-name]').val())

    $('td:nth-child(3)').html('<button>');
    $('button').text('Delete').addClass('delete btn btn-block btn-sm btn-danger');
  });

  $('.delete').click(function() {
    $(this).parent().parent().empty();
  });
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exercises</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="jumbotron">
        <h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
      </div>

      <div class="text-center row">
        <div class="col-sm-6 col-md-6">
          <ul class="list-group"><h4>These are the games that James like the most</h4>
            <li class="list-group-item">...</li>
            <li class="list-group-item">...</li>
            <li class="list-group-item">...</li>
          </ul>
        </div>
        <div class="col-sm-6 col-md-6">
          <ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
            <li class="list-group-item">`empty`</li>
            <li class="list-group-item">`empty`</li>
            <li class="list-group-item">`empty`</li>
          </ul>
        </div>
      </div>

      <hr>
      <br>

      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <form class="text-center" action="index.html" method="post">
            Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
            Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
            <input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
          </form>
          <br>
          <div class="container">
            <table class="table table-bordered table-striped">
              <thead>
                <th>Name of the game</th>
                <th>Rating</th>
                <th><span class="glyphicon glyphicon-remove"></span></th>
              </thead>
              <tbody>
                <!-- Here will be added the games -->
              </tbody>
            </table>
          </div> <!-- Close CONTAINER -->
        </div>
      </div> <!-- Close ROW -->
    </div> <!-- Close CONTAINER-FLUID -->

    </div>
  <script src='script.js'></script>
  </body>
</html>

Upvotes: 2

Views: 503

Answers (2)

Win
Win

Reputation: 5594

Here's a quick solution. Hope this helps.

$(function() {

  $('input[name=add-game]').click(function() {
    
    // Lets get the information ready to be added
    var name = '<td>' + $('input[name="game-name"]').val() + '</td>';
    var rating = '<td>' + $('input[name="game-rate"]').val() + '</td>';
    var btnDelete = '<td><button class="delete btn btn-block btn-sm btn-danger">Delete</button></td>'
    
    // Lets append the information into the game table
    $('tbody[id="game-table"]').append('<tr>' + name + rating + btnDelete + '</td>');

    // Since we've created a delete button, we need to bind
    // an event listener to the button so that we can 
    // delete it from the table if the user clicks it
    $('.delete').on('click', function() {
      $(this).parent().parent().empty();
    });

  });
  
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exercises</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="jumbotron">
        <h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
      </div>

      <div class="text-center row">
        <div class="col-sm-6 col-md-6">
          <ul class="list-group"><h4>These are the games that James like the most</h4>
            <li class="list-group-item">...</li>
            <li class="list-group-item">...</li>
            <li class="list-group-item">...</li>
          </ul>
        </div>
        <div class="col-sm-6 col-md-6">
          <ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
            <li class="list-group-item">`empty`</li>
            <li class="list-group-item">`empty`</li>
            <li class="list-group-item">`empty`</li>
          </ul>
        </div>
      </div>

      <hr>
      <br>

      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <form class="text-center" action="index.html" method="post">
            Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
            Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
            <input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
          </form>
          <br>
          <div class="container">
            <table class="table table-bordered table-striped">
              <thead>
                <th>Name of the game</th>
                <th>Rating</th>
                <th><span class="glyphicon glyphicon-remove"></span></th>
              </thead>
              <tbody id="game-table">
                <!-- Here will be added the games -->
              </tbody>
            </table>
          </div> <!-- Close CONTAINER -->
        </div>
      </div> <!-- Close ROW -->
    </div> <!-- Close CONTAINER-FLUID -->

    </div>
  <script src='script.js'></script>
  </body>
</html>

Upvotes: 1

Farzin Kanzi
Farzin Kanzi

Reputation: 3433

Your code is in $(function()... it means that when the dogument gets ready these codes will run. You add delete buttons after all codes ended. In another way your delete buttons add after the codes running and this:

$('.delete').click(function() {
  $(this).parent().parent().empty();
});

Does not register for new added .delete buttons.

To elements that dynamically adding to page you need to use delegate:

$('.delete').on('click', function() {
  $(this).parent().parent().empty();
});

Upvotes: 0

Related Questions