Question

我正在尝试将用户提供的输入值传递给引导表。用户提供姓名和分数。目前它显示在表格正下方而不是在其中。我该怎么做呢我试图用javascript追加它，但似乎无法弄明白。谢谢

Answer 1

您必须使用以下行将rankings中的数据作为行trs附加到表中：

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

注意：在循环前添加$('table tbody').empty()以重置表格内容。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

添加此代码：

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

小提琴：http://codepen.io/anon/pen/dGdabG

HTML输入值附加到引导表

2 个答案: