Question

我想在下表中添加总值，但有些条件我不知道如何实现

<table id="tableID" width="200" border="1">
  <tr>
    <td class="compulsory">5</td>
    <td class="compulsory">8</td>
    <td class="compulsory">8</td>

    <td class="one">8</td>
    <td class="one">7</td>
    <td class="one">6</td>

    <td class="two">9</td>
    <td class="two">4</td>

    <td class="total"></td>
  </tr>
</table>

条件是;

必须添加类必修的表格数据

类一的表数据选择最高的两个值

类两个的表数据选择最高的一个值

然后在表格数据中显示总数总计

Answer 1

@ Yosel代码的问题在于他总结了所有的值。您的条件是总结第一组中的所有值，第二组中的前2位和第三组中的最高值。

这将产生总共45个。

使用jQuery会更容易，但问题是标记了JavaScript，所以我添加了一个只有JS的解决方案。

首先使用querySelectorAll查询集合的所有元素。初始化一个将跟踪总数的和变量。

第一组很简单，我们可以将所有项目添加到一起。由于HTML集合无法访问所有数组方法，因此我们需要创建单独的数组来存储值。

在您的示例中，方便地对值进行排序，但我们不能总是假设是这种情况。运行sort功能以确保安全。要获得前两个值，可以使用slice函数。

迭代我们刚刚找到的最大的两个数字，并将值加到我们的总和上。第三个更简单，因为我们可以使用max函数

var table = document.getElementById("tableID");

/* we have three seperate groups. Because each has a different condition, we have to create three separate variables.*/
var compulsory = document.querySelectorAll(".compulsory");
var one = document.querySelectorAll(".one");
var two = document.querySelectorAll(".two");

var sum = 0;                     // Store the running total

for (var i = 0; i < compulsory.length; i++) {
    sum += parseInt(compulsory[i].innerHTML);
}

/* QuerySelectorAll returns a collection, so we can't use the sort method on it. Have to create new array objects. */
var oneValues = []; var twoValues = [];

for (var i = 0; i < one.length; i++) {
    oneValues.push(parseInt(one[i].innerHTML));
}

/* Can't assume numbers will always be in order. Sort by descending first and then take the first two numbers */
oneValues = oneValues.sort((a,b) => b - a).slice(0,2);

// Sum up these two numbers;
for (var i = 0; i < oneValues.length; i++) {
    sum += oneValues[i];
}

for (var i = 0; i < two.length; i++) {
    twoValues.push(parseInt(two[i].innerHTML));
}

sum += Math.max.apply(Math, twoValues);

document.getElementsByClassName("total")[0].innerHTML = sum;

td {
  padding: 5px;
}

.total {
  font-weight: bold;
}

<table id="tableID" width="200" border="1">
  <tr>
    <td>Compulsory</td>
    <td class="compulsory">5</td>
    <td class="compulsory">8</td>
    <td class="compulsory">8</td>

    <td>One</td>
    <td class="one">8</td>
    <td class="one">7</td>
    <td class="one">6</td>

    <td>Two</td>
    <td class="two">9</td>
    <td class="two">4</td>
     <td>Total</td>
    <td class="total"></td>
  </tr>
</table>

Answer 2

如果需要，您可以进一步重构以下解决方案。

two-way

Answer 3

这是使用jQuery的解决方案：

＆＃13;

var total = 0,
    oneVal = 0,
    twoVal = 0,
    one = [],
    two = [],
    $tds = $('td:not(:last-child)');

$tds.each(function(i) {
    var currentClass = $(this).attr('class'),
        currentVal = parseInt($(this).html());
  
    switch (currentClass) {        
        case 'one':
            one.push(currentVal);
            break;

        case 'two':
            two.push(currentVal);
            break;
        
        default:
          total += currentVal;
    }

    if (i + 1 === $tds.length) {
        // Sort and sum the big ones
        one.sort(function(a, b) { return a - b });
        oneVal = one[one.length - 1] + one[one.length - 2];

        // Get the max
        twoVal = Math.max.apply(Math, two);
          
        total = total + oneVal + twoVal;
    } 
});

$('td.total').html(total);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tableID" width="200" border="1">
  <tr>
    <td class="compulsory">5</td>
    <td class="compulsory">8</td>
    <td class="compulsory">8</td>

    <td class="one">8</td>
    <td class="one">7</td>
    <td class="one">6</td>

    <td class="two">9</td>
    <td class="two">4</td>

    <td class="total"></td>
  </tr>
</table>

＆＃13;

使用javascript从行添加总计

3 个答案: