Tally表列Jquery

Question

我有一个大约有10行和4列的标准样式表。我需要用户为每行选择列2、列3或列4(列2=5点、列3=3点和列4=0点)。

然后，我需要计算2-4列的总数。

我甚至连“选定的”部分都做不好，所以如果有任何帮助，我将不胜感激。

<table id="M3L1A1" class="table">
    <thead>
        <tr>
            <th scope="col">Points</th>
            <th scope="col">5 points each</th>
            <th scope="col">3 points each</th>
            <th scope="col">0 points each</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1.</th>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
        <tr>
            <th scope="row">2.</th>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
        <tr>
            <th scope="row">3.</th>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
        <tr>
            <th scope="row">total</th>
            <td id="colTotal2"></td>
            <td id="colTotal3"></td>
            <td id="colTotal4"></td>
        </tr>
    </tbody>
</table>
<script>
$('#M3L1A1 tr').each(function(){
            $('td').click(function(){                   
                $('.selected').empty();
                $('td').removeClass('selected');
                $(this).addClass('selected');
                $('.selected').html('X');
        });
        return false;
    });
</script>

Answer 1

您可以尝试如下所示：

var points = [5, 3, 0]
$('#M3L1A1 tr:not(:last) td').click(function() {
  $('.selected').empty();
  $(this).closest("tr").find("td").removeClass('selected');
  $(this).addClass('selected');
  $('.selected').html('X');

  $('#M3L1A1 tr:last td').text("")

  $('.selected').each(function() {
    var inx = $(this).index() - 1;
    var td = $('#M3L1A1 tr:last td').eq(inx)
    var point = +td.text() + points[inx];
    td.text(point)
  })

});

演示

​

var points = [5, 3, 0]
$('#M3L1A1 tr:not(:last) td').click(function() {
  $('.selected').empty();
  $(this).closest("tr").find("td").removeClass('selected');
  $(this).addClass('selected');
  $('.selected').html('X');

  $('#M3L1A1 tr:last td').text("")

  $('.selected').each(function() {
    var inx = $(this).index() - 1;
    var td = $('#M3L1A1 tr:last td').eq(inx)
    var point = +td.text() + points[inx];
    td.text(point)
  })

});

td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="M3L1A1" class="table">
  <thead>
    <tr>
      <th scope="col">Points</th>
      <th scope="col">5 points each</th>
      <th scope="col">3 points each</th>
      <th scope="col">0 points each</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1.</th>
      <td class="col2"></td>
      <td class="col3"></td>
      <td class="col4"></td>
    </tr>
    <tr>
      <th scope="row">2.</th>
      <td class="col2"></td>
      <td class="col3"></td>
      <td class="col4"></td>
    </tr>
    <tr>
      <th scope="row">3.</th>
      <td class="col2"></td>
      <td class="col3"></td>
      <td class="col4"></td>
    </tr>
    <tr>
      <th scope="row">total</th>
      <td id="colTotal2"></td>
      <td id="colTotal3"></td>
      <td id="colTotal4"></td>
    </tr>
  </tbody>
</table>

​