Question

我有一张包含球队名称和分数的表格。我在这里做了一个演示 Fiddle Link

单击“提交”按钮时，它将仅显示一个匹配项的输出（仅限A队和B队），而不显示其他匹配项。

由于他们都为名称和分数共享相同的类名，如何继续？

HTML

<table>
  <tr data-match="match1">
    <td class="team1n">Team A</td>
    <td>
      <input type="number" id="ts1" class="ts1" value="3">
    </td>
    <td>
      <input type="number" class="ts2" value="1">
    </td>
    <td class="team2n">Team B</td>
  </tr>
  <tr data-match="match2">
    <td class="team1n">Team C</td>
    <td>
      <input type="number" class="ts1" value="2">
    </td>
    <td>
      <input type="number" class="ts2" value="3">
    </td>
    <td class="team2n">Team D</td>
  </tr>
  <tr data-match="match3">
    <td class="team1n">Team E</td>
    <td>
      <input type="number" class="ts1" value="2">
    </td>
    <td>
      <input type="number" class="ts2" value="1">
    </td>
    <td class="team2n">Team F</td>
  </tr>
</table>

<button type="button" id="sprd">Submit</button>

<div class="textbox"></div>

JS

$("#sprd").click(function() {
    const matchid = $('tr').data("match");
    const team1n = $('.team1n:eq(0)').text();
    const team1s = parseInt($(".ts1:eq(0)").val());
    const team2n = $('.team2n:eq(0)').text();
    const team2s = parseInt($(".ts2:eq(0)").val());

    $('.textbox').append(team1n + " --- " + "<b>"+ team1s+ "</b>"+ " - " + "
<b>"+ team2s+ "</b> --- "+ team2n);

});

Answer 1

你必须在表中循环每个tr elemnt然后在循环渲染结果之后获取值，然后将它们放入结果中。

见下面的代码：

$("#sprd").click(function() {
  var result = "";
  $("table tr").each(function(index,el) {
    var match = $(el).data("match");
     result +="<div class='macth'>"+match+"</div>";
    var team1 = $(el).find('.team1n').text();
    var team2 = $(el).find('.team2n').text();
    var score1 = $(el).find('.ts1').val();
    var score2 = $(el).find('.ts2').val();
    result += '<div>'+team1+ " --- " + "<b>" + score1 + "</b>" + " - " + "<b>" + score2 + "</b> --- " + team2+'</div>';
  });

  $('.textbox').html(result);

});

.macth {
  color:green;
  text-transform:capitalize;
  font-weight:bold;
  margin-top:15px;
}

.textbox  {
  margin:auto;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-match="match1">
    <td class="team1n">Team A</td>
    <td>
      <input type="number" id="ts1" class="ts1" value="3">
    </td>
    <td>
      <input type="number" class="ts2" value="1">
    </td>
    <td class="team2n">Team B</td>
  </tr>
  <tr data-match="match2">
    <td class="team1n">Team C</td>
    <td>
      <input type="number" class="ts1" value="2">
    </td>
    <td>
      <input type="number" class="ts2" value="3">
    </td>
    <td class="team2n">Team D</td>
  </tr>
  <tr data-match="match3">
    <td class="team1n">Team E</td>
    <td>
      <input type="number" class="ts1" value="2">
    </td>
    <td>
      <input type="number" class="ts2" value="1">
    </td>
    <td class="team2n">Team F</td>
  </tr>
</table>

<button type="button" id="sprd">Submit</button>

<div class="textbox">

</div>

如何从相同类名的表数据中获取值并追加

1 个答案: