Question

我有一个看起来像这样的html表......

<table>
   <tr>
     <th>Date</th>
     <th>Pair</th>
     <th>Game</th>
     <th>Chance</th>
   </tr>
   <tr>
     <td>2014-2-12</td>
     <td>Milan-Udinese</td>
     <td>1</td>
     <td>1.6</td>
   </tr>
   <tr>
     <td>2014-2-13</td>
     <td>Juventus-Inter</td>
     <td>x</td>
     <td>2.5</td>
   </tr>
   <tr>
     <td>2014-2-13</td>
     <td>Arsenal-Liverpul</td>
     <td>2</td>
     <td>2.5</td>
   </tr>
</table>
<p>Total number is:MULTIPLICATION OF ALL CHANCE COLUMN TD</p>

我的所有行都是动态添加的，我如何将所有机会列td值（数字）相乘？我是否必须将某些类放在机会tds上，然后获取该类的所有tds，然后循环并乘以每个值然后？我有点像新手，所以任何帮助都会受到赞赏。

Answer 1

您可以这样做：

var tots = 1;

$('tr td:nth-child(4)').each(function(){
  tots *= $(this).text();
});

nth-child（4）正在选择每行中的第四个td，如果你想要另一个，只需更改该数字。

或者您可以将您想要的单元格提供给多个类，就像您说的那样。

example here

Answer 2

如果您使用的是jQuery，:last-child选择器可能会有所帮助。

<p>Total number is: <span id="result"></span></p>

使用Javascript：

res = 1;
$("tr td:last-child").each(function() {
    res *= parseFloat($(this).html());
});


$("#result").html(res);

查看此JSFiddle。

Answer 3

您不需要jQuery来执行此操作。 querySelectorAll也支持nth-child选择器。

var derp = document.querySelectorAll("tr td:nth-child(4)");
var total = 1;
var results = [].reduce.call(derp, function (prev, next) {
    return prev * ( + next.textContent );
});

抓取元素，并使用原生Array原型方法（[]）迭代NodeList并返回元素的解析值，然后返回乘以的总数。

以下是fiddle。

Answer 4

$(function () {
    var chanceTotals = 1;
    $("tr td:nth-child(4)").each(function () {
        chanceTotals *= parseFloat($(this).html());
    });
    $("#totals").html("Total number is: " + chanceTotals);
});

使用jQuery，当文档准备就绪时，它会执行一个匿名函数，为你做计算。

您需要将totals标识添加到p元素中才能生效。

看看这个JSFiddle

Answer 5

你真的根本不需要jquery来做这件事。直接与DOM交互可能会让你写得更多（浏览器支持），但它比使用jQuery（不必要的开销）更有效。

如您所见，我重新组织了您的<table>。我本可以抓住<tbody>并对其子项进行循环，并跳过整个if <TD> ?检查。

DEMO

$(document).ready(function () {
    var table = $('#myTable').get(0);
    var multiplier = 1;
    var col = 3;

    for (var row = 0; row < 4; row++) {
        var cell = table.rows[row].cells[col];

        if (cell.nodeName == 'TD') {
            var text = cell.innerText || cell.textContent;
            multiplier *= parseFloat(text);
        }
    }

    $('#multiplier').text(multiplier);
});

<table id="myTable">
    <thead>
        <tr>
            <th>Date</th>
            <th>Pair</th>
            <th>Game</th>
            <th>Chance</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2014-2-12</td>
            <td>Milan-Udinese</td>
            <td>1</td>
            <td>1.6</td>
        </tr>
        <tr>
            <td>2014-2-13</td>
            <td>Juventus-Inter</td>
            <td>x</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>2014-2-13</td>
            <td>Arsenal-Liverpul</td>
            <td>2</td>
            <td>2.5</td>
        </tr>
    </tbody>
</table>
<p>Total number is:
    <span id="multiplier">MULTIPLICATION OF ALL CHANCE COLUMN TD</span>
</p>

乘以td值

5 个答案: