添加文本输入到表

我试图使名称为“游戏名称”的input的值在表格的“游戏名称”列中，当我点击“添加游戏”时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(); 
 
    }); 
 
});

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

来源

2017-02-11 Paul Mihali

不要忘记给予好评有用的答案。 –

@ spencer.sm我希望我可以upvote。我需要15声望，但一旦我得到它，我会回来，并upvote :) –

哦，是的...我忘了这一点。 –

这里有一个快速的解决方案。希望这可以帮助。

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

来源

2017-02-11 21:37:21 Win

非常感谢修复！现在我仍然不明白为什么删除'button'不起作用。 –

@PaulMihali嗨，我已经添加了一个修正，作为对上述代码的编辑。 – Win

谢谢。无论如何，我已经修好了。我现在无法赶上你的帖子，因为我没有总共15的声望，但我会回来一旦我:) –

你的代码是在$(function()...这意味着当dogument准备好这些代码将运行。所有代码结束后添加删除按钮。在另一种方式的删除按钮运行代码，并在此之后添加：

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

不注册新增加.delete按钮。

，来动态地添加到页面元素，你需要使用委托：

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

来源

2017-02-11 21:47:28

由于某些原因，它不这样工作。我把这个函数放在'$（'input [name = add-game]'）。click（function（）{}'现在工作得很好。 –

Yes i see，but still it is the solution of delete buttons开始工作.. –

这是我第一次提到使用委托，但你说我*它不工作*，并在这之后写的相同的代码，你说*谢谢*？ –

添加文本输入到表

回答

相关问题