Adding text input to table

Question

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>

@spencer.sm I wish I could upvote. I need 15 reputation, but once I get it, I will come back and upvote :) — Paul
– Paul, Commented Feb 11, 2017 at 22:00

Win · Accepted Answer · 2017-02-11 21:55:53Z

1

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>

edited Feb 11, 2017 at 21:55

answered Feb 11, 2017 at 21:37

Win

5,5942 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paul Over a year ago

Thanks a lot for the fix! Now I still don't understand why the delete button does not work.

Win Over a year ago

@PaulMihali Hi, I've added a fix for this as an edit to the above code.

Paul Over a year ago

Thanks. I fixed it already anyway. I can't upvote your post right now because I don't have a total of 15 reputation, but I will come back once I get :)

Win Over a year ago

@PaulMihali Thanks :)

Farzin Kanzi · Accepted Answer · 2017-02-11 21:47:28Z

0

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();
});

answered Feb 11, 2017 at 21:47

Farzin Kanzi

3,4532 gold badges23 silver badges25 bronze badges

2 Comments

Paul Over a year ago

For some reasons it does not work like that. I put the function in the $('input[name=add-game]').click(function() {} and it works just fine now.

Farzin Kanzi Over a year ago

That was me that first time mentioned to use delegate. But you say me it does not work and to the same code that is written after this, you said Thanks?

Collectives™ on Stack Overflow

Adding text input to table

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related