Question

在此先感谢您，请指导我如何求解所选值的总和。此列每行包含多个值，但在单行中必须单击一个值才可以继续添加。封闭的主表3行，并再次封闭3个子值。

在此表中，我可以获取选定值的结果，但是它在一行中添加了多个值，当到达点的末尾时，它再次添加了值。

<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>

接受结果是在每行中仅添加一个值，在达到总值时应停止，并清除诸如Total和Clear之类的值。

Answer 1

好吧，我想我遇到了您遇到的问题。您希望只应从每个表中选择一个值，而总和应在每个表中选择的值。以下是我认为可以满足您要求的代码。如果您需要任何解释，请告诉我。

首先，您的代码中的问题是您有三个表，并且每个表只希望获取一个值，但是您拥有引用该元素的同一类。更好的方法是让它们具有不同的类，以便我们可以区分每个表。这就是我在下面的代码中所做的。

HTML //向表按钮添加了class tableButton类，以区别于其他按钮变量得分了

 <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>

JavaScript jQuery代码：

 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);

JSFiddle：这是您要寻找的行为吗？ https://jsfiddle.net/apoorvBarwa/vquer70c/82/

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

1 个答案: