HTML input value append to a bootstrap table

Question

I am trying to pass the value of an input a user provides to a bootstrap table. User provides a name and a score. Currently it is being displayed right below the table instead of within it. How would I go about doing this. I've tried to append it using javascript but cant seem to figure it out. Thanks

Here is my codepen for this project. codepen.io/iamsok/pen/YweEmb — itsok
– itsok, Commented Jan 24, 2016 at 21:36
if you want it to be displayed within the table append the result to the table, than to a seperate element — Adarsh Mohan
– Adarsh Mohan, Commented Jan 24, 2016 at 21:41

Zakaria Acharki · Accepted Answer · 2016-01-24 21:45:01Z

You have to append data you have in rankings to the table as rows trs using the following line :

 $('table').append('<tr><td>' + rankPosition + '</td><td> ' +rankings[i].name + '</td><td>'
 + rankings[i].score + ' pts</td></tr>');

Note : Add $('table tbody').empty() before the loop to reset table content.

Hope this helps.

$(document).ready(function() {
  var scoreboard;
  var rankings = [];
  var displayScoreboard = function(rankings) {
    var rankPosition = 1;
    var tieScore = 0
    var previousScore = 0;
    $('#rankings').html('')
    $('table tbody').empty();

    for (var i = 0; i < rankings.length; i++) {
      if (i > 0 && rankings[i-1].score !== rankings[i].score) {
        rankPosition = rankPosition + tieScore +1;
      }
      $('table').append('<tr><td>' + rankPosition + '</td><td> ' +rankings[i].name + '</td><td> ' + rankings[i].score + ' pts</td></tr>')
    }
  }
  var sortRankings = function(rankings) {
    rankings.sort(function(a, b) {
      return b.score-a.score;
    });
  };
  $('#add').on('click', function() {
    var playerName = $('#eq-name').val();
    var playerScore = $('#eq-score').val();

    if (playerName.length > 0 && playerScore.length > 0) {
      var playerStats = {name: playerName, score: playerScore};
      rankings.push(playerStats);
      sortRankings(rankings);
      displayScoreboard(rankings);
      $('#eq-name').val('');
      $('#eq-score').val('');
    } else {
      alert("Please enter a name and a score");
    }
  });

  $('#clear').on('click', function() {
    $('#rankings').html('');
    rankings = [];
  });
});

.eq-input {
  display:block;
  text-align:center;
  vertical-align:middle;
  width:100%;
  height:100%;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <title>EverQuoteTest</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.scss">
  </head>
  <body>

    <div class="container eq-input">
      <input type="text" id="eq-name" placeholder="Name">
      <input type="number" id="eq-score" placeholder="Score" min=0>
      <br>
      <br>
      <button class="btn btn-success" id="add">Add To Rankings</button>
      <button class="btn btn-danger" id="clear">Clear Rankings</button>
      <a id="add-game" class="btn btn-default ">Add Game</a>
    </div>

    <div class="container">
      <div class="col-md-8 col-md-offset-4">
        <h3>Leaderboard</h3>
      </div>
      <table class="table" border="1">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Name</th>
            <th>Score</th>
          </tr>
        </thead>
      </table>
      <ul class="list-unstyled" id="rankings"></ul>
    </div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.0.0/lodash.min.js"></script> -->
    <script src="js/main.js"></script>
  </body>
</html>

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-24 21:42:04Z

1

Add this code:

$('.table')
    .append('<tr><td>' + rankPosition + '</td><td>' + rankPosition + '</td><td>' +rankings[i].name + ', ' + rankings[i].score + ' pts</tr>');

Fiddle: http://codepen.io/anon/pen/dGdabG

answered Jan 24, 2016 at 21:42

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

HTML input value append to a bootstrap table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related