Question

当我点击“添加游戏”时，我试图将名为“游戏名称”的input的值设置在表格的“游戏名称”列中{{ 1}}。删除button也不起作用。

这是我的代码：

button

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

Answer 1

这是一个快速的解决方案。希望这会有所帮助。

$(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>

Answer 2

您的代码位于$(function()...，这意味着当准备就绪时，这些代码将会运行。在所有代码结束后添加删除按钮。换句话说，删除按钮会在代码运行后添加：

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

不注册新添加的.delete按钮。

要动态添加到页面的元素，您需要使用委托：

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

向表中添加文本输入

2 个答案: