Javascript 如何在每行中仅添加选定值并到达点的末尾，请停止添加

提前感谢。请指导我如何计算所选值的总和。此列每行包含多个值。但在一行中，必须单击一个值才能继续添加。封闭的主表为3行，再次封闭的子表为3行

在这个表中，我可以得到所选值的结果。但它在一行中添加了超过1个值。当它到达终点时，它将再次添加值

<table id="table" border="1">
    <tr><th>Variable</th>
        <th>Score</th></tr>

    <tr><th>CRP (mg/l)</th></tr>

    <tr><td> _> 97</td>
         <td><button  type="button" class="values" value="6">6</button></td>
    </tr>
    <tr><td>_>43 < 97</td>
         <td><button class="values" value="4">4</button></td>
    </tr>

    <tr>
        <td>_>12< 43</td>
        <td><button class="values" value="2">2</button></td>
    </tr>
    <tr><td>< 12</td>
        <td><button class="values" value="0">0</button></td>
    </tr>

    <tr><th>NLR</th></tr>

    <tr><td>>9</td>
         <td><button class="values" value="6">6</button></td>      
    </tr> 

    <tr><td> _>43 < 97</td>
        <td><button class="values" value="3">3</button></td>
    </tr> 

    <tr><td>_>12 < 43 </td>
        <td><button class="values" value="1">1</button></td>
    </tr>
    <tr><td>< 12 </td>
        <td><button class="values" value="0">0</button></td>

    <tr><th>Procalcitonin(ng/ml)</th></tr>
    <tr><td> >1</td>
        <td><button class="values" value="6">6</button></td>           
     </tr>
    <tr><td>>0.5 to <_1</td>
        <td><button class="values" value="3">3</button></td>
    </tr>

    <tr><td>>0.25 to <_0.5</td>
        <td><button class="values" value="1">1</button></td>
    </tr>

    <tr><td><_0.25 </td>
        <td><button class="values" value="0">0</button></td>
    </tr>           
</table>
 <br><br>

<button type="button" class="total">Total</button>

<button class="clear">Clear</button>

     <script>
        var theTotal = 0;

            $('button').click(function(){
                theTotal = Number(theTotal) + Number($(this).val());
                {
                    $(this).css("border","5px solid #FF0000");/* this is helps to give a text background color*/
                }
            $('.total').text("Total: "+theTotal);        
           });

              $('.total').text("Total: "+theTotal);

    </script>

变量
分数
CRP（毫克/升）
_> 97
6.
_>43 < 97
4.
_>12< 43
2.
< 12
0
NLR
>9
6.
_>43 < 97
3.
_>12 < 43 
1.
< 12 
0
降钙素原（ng/ml）
>1
6.
>0.5到0.25到好的，我想我知道你面临什么问题了。您希望从每个表中只选择一个值，并且总和应为每个表中选择的值。下面是我认为可以满足您要求的代码。如果你需要任何解释，请告诉我

首先，代码中的问题是有三个表，每个表只需要取一个值，但引用元素的类是相同的。更好的方法是让他们有不同的类，这样我们可以区分每个表。这就是我在下面代码中所做的

HTML
//将类tableButton添加到表按钮，以区别于其他按钮
变量
分数

JSFiddle：
这就是你想要的行为吗
 好吧，我想我知道你面临什么问题了。您希望从每个表中只选择一个值，并且总和应为每个表中选择的值。下面是我认为可以满足您要求的代码。如果你需要任何解释，请告诉我

首先，代码中的问题是有三个表，每个表只需要取一个值，但引用元素的类是相同的。更好的方法是让他们有不同的类，这样我们可以区分每个表。这就是我在下面代码中所做的

HTML
//将类tableButton添加到表按钮，以区别于其他按钮
变量
分数

JSFiddle：
这就是你想要的行为吗
 你能和我一起分享HTML吗？预期的结果是什么。因为问题可能在哪里还不是100%清楚。我仍然不清楚你面临的问题。检查包含代码-->的链接。当我单击每个元素时，总计数将按单击的值递增。这是你想要的行为吗？或者这个问题是什么？非常感谢Apoorv。如果我点击6号，它必须显示6号，然后我点击4号，它必须只选择4号，如果我要单击2，它必须是只选择2…并且在每一个主要行中只选择单个值而不是多个值。最后的值应该是get sum。不知不觉地，如果我被选择了6，但我需要在最后添加4个值。所以这6个数字我不想添加。然后它必须是只选择4个而不是6个。你能与此一起共享HTML吗这是预期的结果。因为问题可能在哪里还不是100%清楚。我仍然不清楚你面临的问题。检查包含代码-->的链接。当我单击每个元素时，总计数将按单击的值递增。这是你想要的行为吗？或者这个问题是什么？非常感谢Apoorv。如果我点击6号，它必须显示6号，然后我点击4号，它必须只选择4号，如果我要单击2，则必须只选择2…并且在每个主要行中只选择单个值而不是多个值。最后的值应为get sum。不知不觉中，如果我被选择为6，但我需要在最后添加4个值。因此，我不想添加这6个数字。然后必须只选择4个而不是6个。感谢您费心帮助我。我愿意谢谢。我得到了准确的结果，这是我接受的结果。好的。。很高兴我能帮上忙。。。你能把这个作为被接受的答案来投票吗谢谢你。是的，我被投票了。但是还有另一个问题。用“清除”按钮清除总和值结果。@BALARAMA:先生，你把你问的问题投了高票，而不是我提供的答案。请您将我提供的答案向上投票否，先生。我被点击左侧向上箭头标记，即这是答案很有用[^]感谢您不辞辛劳地帮助我。我非常感谢。我得到了准确的结果，这是我正在接受的答案。好的。。很高兴我能帮上忙。。。你能把这个作为被接受的答案来投票吗谢谢你。是的，我被投票了。但是还有另一个问题。用“清除”按钮清除总和值结果。@BALARAMA:先生，你把你问的问题投了高票，而不是我提供的答案。请您将我提供的答案向上投票否，先生。我被点击左侧向上箭头标记，即这是有用的答案[^]
 <tr>
   <th>CRP (mg/l)</th>
 </tr>

 <tr>
   <td> _> 97</td>
 <td><button type="button" class="tableButton values1" value="6">6</button> 
 </td>
</tr>
<tr>
 <td>_>43 < 97</td> <td><button class="tableButton values1" 
   value="4">4</button></td>
</tr>

<tr>
 <td>_>12< 43</td> <td><button class="tableButton values1" 
 value="2">2</button></td>
</tr>
<tr>
  <td>
   < 12</td> <td><button class="tableButton values1" value="0">0</button>
  </td>
</tr>

<tr>
  <th>NLR</th>
</tr>

 <tr>
   <td>>9</td>
   <td><button class="tableButton values2" value="6">6</button></td>
 </tr>

 <tr>
   <td> _>43 < 97</td> <td><button class="tableButton values2" 
   value="3">3</button></td>
</tr>

<tr>
   <td>_>12 < 43 </td> <td><button class="tableButton values2" 
   value="1">1</button></td>
 </tr>
 <tr>
 <td>
    < 12 </td> <td><button class="tableButton values2" value="0">0</button>
 </td>

  <tr>
    <th>Procalcitonin(ng/ml)</th>
 </tr>
 <tr>
  <td> >1</td>
  <td><button class="tableButton values3" value="6">6</button></td>
  </tr>
 <tr>
   <td>>0.5 to <_1</td> <td><button class="tableButton values3" 
value="3">3</button></td>
</tr>

 <tr>
   <td>>0.25 to <_0.5</td> <td><button class="tableButton values3" 
value="1">1</button></td>
 </tr>

 <tr>
   <td>
     <_0.25 </td> <td><button class="tableButton values3" 
value="0">0</button>
   </td>
  </tr>
 </table>
<br><br>

 <button type="button" class="total">Total</button>

 <button class="clear">Clear</button>

 var theTotal = 0;
 var variables = {}
  //clear button functionality 
 $('.clear').click(function() {
 $.each(variables,function(key,value){
 $("."+key.split(" ")[1]).css("border","#ffffff")
  })
 theTotal = 0
 $('.total').text("Total: " + theTotal);
 })




 $('.tableButton').click(function() {
  {
  var classToRem = ($(this).attr('class'))
  console.log(classToRem)
  variables[classToRem] = Number($(this).val())

    $("."+classToRem.split(" ")[1]).css("border","#ffffff")
   $(this).css("border", "5px solid #FF0000"); /* this is helps to give a 
 text background color*/
 }
 theTotal = Object.keys(variables).reduce((sum,key)=>sum+parseFloat(variables[key]||0),0)


 $('.total').text("Total: " + theTotal);
 });

 $('.total').text("Total: " + theTotal);