如何從同一類名稱的表數據中獲取值並追加

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>