JavaScript笔记一统计表格数据

获取表格某列所有单元格内容:

querySelectorAll:

字符串转换浮点数:

parseFloat;

创建表元素:

createElement;

创建文本节点:

createTextNode

添加子节点:

appendChild

var cells = doucment.querySelectorAll("td:nth-of-type(2)"):

for (var i=0; i<cells.length; i++) {

  sum+=parseFloat(cells[i].firstChild.data);

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessing numbers in table</title>
</head>
<body>
<table id="table1">
<tr>
<td>Washington</td>
<td>145</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;

//use querySelector to find all second table celss
var cells = document.querySelectorAll("td + td");

for (var i=0; i<cells.length; i++)
sum += parseFloat(cells[i].firstChild.data);

// add sum to end of table;
var newRow = document.createElement("tr");

// first cell
var firstCell = document.createElement("td");
var firstCellText = document.createTextNode("Sum:");
firstCell.appendChild(firstCellText);
newRow.appendChild(firstCell);

//Second cell
var secondCell = document.createElement("td");
var secondCellText = document.createTextNode(sum);
secondCell.appendChild(secondCellText);
newRow.appendChild(secondCell);

//add row to table
document.getElementById("table1").appendChild(newRow);
</script>
</body>
</html>

时间: 2024-07-31 00:51:35

JavaScript笔记一统计表格数据的相关文章

JavaScript动态增删改表格数据

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="tex

JavaScript将网页表格数据导出为Excel文件

不使用服务器端的技术,直接使用js将网页中的表格数据导出为excel文件,支持所有浏览器:前提条件是:网页中的表格数据必须使用table标签排版且不能有任何错误. <!DOCTYPE HTML> <html> <head> <title>javascript exportExcel</title> </head> <body> <table id="name" border="1&quo

原生javaScript导出表格数据

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

EXCEL表格自动统计测试用例数据的方法

做测试的同学写用例会用到一些工具,但其实大部分都用excel在管理着用例,当用例 数量较多,比如几千条甚至上万条时,统计测试用例及测试结果数据就是个头大的事情. 各位有福了,老衲把多年的经验传授给大家. 我们有个目录和另外很多个表单,这里我只举例"设备连接及信息"表单, 这里是我们的目录,用例的所有数据都会自动显示在这里,并且是实时变化的. 这是"设备连接及信息"表单里的用例里测试类型下的列表数据,这里有五个列表. 这是"设备连接及信息"表单里的

layer学习笔记之table表格引入数据实现分页

LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的使用,但是layer页面效果使用也是非常好用的. 之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下. 使用之前请先详细阅读layer的文档:http://www.layui.com/doc/modules/layer.html 首先下载最新版的lay

jQuery整理笔记九----功能性表格开发

示例中用到的一些图片.插件.样式文件等下载地址:点我进入下载 过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行.删除一列等等操作.今天整理的跟过去用的不一样. 1.uiTableFilter uiTableFilter是一款表格数据行过滤插件,使用很简单,具体用法如下: $.uiTableFilter(table,phrase)  该函数包含两个参数,其中第一个参数为jQuery对象,即为jQuery方法匹配的表格,或者也可以是jQuery匹

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

Easy-ui Datagrid表格数据的编辑与提交

前言 jQuery EasyUI是一组基于jQuery的UI 插件集合体,而jQuery EasyUI可以打造出功能更加丰富且美观的UI界面.开发者不需要了解复杂的javascript和css样式,只需要了解html标签. 一.    easy-ui基本知识 1.            easy-ui引用js顺序详解 引用Jquery的js文件: <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="te

jetty+bootstrap Carousel+springMVC+mybatis实现表格数据的轮播

index.jsp <%@ page language="java" pageEncoding="UTF-8"%> <%@include file="/taglibs.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&quo