把表中一列的所有数字加和

最新推荐文章于 2021-06-16 02:55:33 发布

jimjiayu

最新推荐文章于 2021-06-16 02:55:33 发布

阅读量1k

点赞数 2

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/zhongshijun521/article/details/70537635

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>Aceesing numbers in table</title>
    <style type="text/css">
        #tab{
            border: 1px solid #333;
            border-collapse: collapse;
            width: 200px;
        }
        #tab tr td{
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
  <table id="tab">
        <tr>
            <td>Washington</td>
            <td>45</td>
        </tr>
        <tr>
            <td>Oregon</td>
            <td>233</td>
        </tr>
        <tr>
            <td>Missouri</td>
            <td>833</td>
        </tr>
  </table>
  <script type="text/javascript">
        var sum = 0;
        // 使用   querySelect找到第二列中的所有单元格
        var cells = document.querySelectorAll("td + td");
        for (var i = 0; i < cells.length; i++) {
            sum += parseFloat(cells[i].firstChild.data);
        }
        // 在表的末尾创建一行
        var newRow = document.createElement("tr");
        // 最后一行第一个单元格
        var firstCell = document.createElement("td");
        var firstCellText = document.createTextNode("Sum:");
        firstCell.appendChild(firstCellText);
        newRow.appendChild(firstCell);
 // 带有总和的第二个单元格
 var secondCell = document.createElement("td");
 var secondCellText = document.createTextNode(sum);
 secondCell.appendChild(secondCellText);
 newRow.appendChild(secondCell);
 document.getElementById("tab").appendChild(newRow);

  </script>
</body>
</html>

全局函数parseInt(）和parseFloat()都把字符串转换为数字，但是，当需要处理HTML表格中的数字的时候，parseFloat()更合适。除非你绝对确定所有的数字都是整数。parseFloat()既可以用于整数，也能够用于浮点数。当遍历HTML表格并且把表格中的项目转为数字后并求和，在表格的末尾创建一行带有加和结果的一行。这段代码使用document.querySelectorAll，它使用了一个CSS选择器，即td+td.该选择器找到其前面有另一个单元格的所有单元格。

jimjiayu

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
把表中一列的所有数字加和

<!DOCTYPE html><html><head> <title>Aceesing numbers in table</title> <style type="text/css"> #tab{ border: 1px solid #333; border-collapse: collapse;
复制链接

扫一扫