I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an issue with numbering the rows automatically starting from the second row. You can view my code progress so far on this jsfiddlelink.
$(document).ready(function(){
var gameRounds = [1, 2];
$(document).on("keyup", ".add", function() {
var sum = 0;
$(".add").each(function(){
sum += +$(this).val();
});
$("#sum").text(sum);
});
var newRound = $('#newRound');
newRound.click(function(){
$('.totals').before(
"<tr>",
"<td class='round'></td>",
"<td class='p1'><input class='add' id='r1' type='number' name='r1'></td>",
"</tr>"
);
console.log(gameRounds);
});
});table, th, td {
border: 1px solid black;
}
table {
width: 15%;
}
.p1 {
background: lightblue;
}
.round {
width: 3em;
margin: auto;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="update">
<thead>
<th class="round">Round</th>
<th class="p1">player1</th>
</thead>
<tr class="r1">
<td class="round"></td>
<td class="p1">
<input class="add" id="r1" type="number" name="r1"></td>
</tr>
<tr>
<td class="round"></td>
<td class="p1">
<input class="add" id="r2" type="number" name="r2">
</td>
</tr>
<tfoot class="totals">
<td class="round">total</td>
<td class="p1">
<span id="sum"></span>
</td>
</tfoot>
</table>
<div class="btnStyle">
<button id="newRound">New Round</button>
</div>The button and calculator may not work on jsfiddle, but they function perfectly fine in Sublime Text and CodePen.