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

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表，然后得到的值，之后puttinh他们因此，循环渲染后的结果。

见下文片段：

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