添加文本輸入到表

我試圖使名稱爲「遊戲名稱」的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開始工作.. –

這是我第一次提到使用委託，但你說我*它不工作*，並在這之後寫的相同的代碼，你說*謝謝*？ –

添加文本輸入到表

回答

相關問題