最近做项目要用jquery来统计table中的所有行数据，现已完成demo，把代码贴出来，对了
jquery-1.7.1.js文件需要到官网下载下，这里就不上传了
：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery sum</title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script language="javascript">
//window.onload=function(){alert("hello,world");};
//window.alert("ok");
//alert("ok2");
/*$(document).ready(function(){
alert("hello,world");
});
*/
$(document).ready(function(){
$("a").click(function(event){
//console.log(event,event.type);
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
$(this).hide("slow");
});
//console.log($("#aid").html());
//$("#aid").each(function(i,n){ console.log(i,n);});
//$("a").each(function(i,n){
//console.log(i,n);
//console.log($(this).attr("id"),',',$(this).attr("href"));
//});
//console.log($("#tb>tbody>tr:eq(1)").html());
var count=0;
var tbLen=$("#tb>tbody>tr").length;
for(j=0;j<tbLen;j++){
$("#tb>tbody>tr:eq("+j+")>td>input").each(function(i,n){
//this(n).find("input").each(function(j,k){
//console.log(j,k);
//});
//console.log($(this).attr("value"),",",$(this).val());
if (i==2){
$(this).val(count);
count=0;
}else{
count+=parseInt($(this).val());
}
});
}
//console.log($("a"), $("a:first"));
});
</script>
</head>
<body>
<table width="594" height="88" border="1" id="tb">
<tr>
<td><input name="test1" type="text" value="5" /></td><td><input name="test2" type="text" value="2" /></td><td>count:<input name="test3" type="text" /></td>
</tr>
<tr>
<td><input name="test1" type="text" value="5" /></td><td><input name="test2" type="text" value="3" /></td><td>count:<input name="test3" type="text" /></td>
</tr>
<tr>
<td><input name="test1" type="text" value="4" /></td><td><input name="test2" type="text" value="5" /></td><td>count:<input name="test3" type="text" /></td>
</tr>
</table>
<a id="aid" href="http://jquery.com/">jQuery</a> <a id="bid" href="#">china</a>
</body>
</html>
分享到：
相关推荐
本主题聚焦于“jQuery表格分组”，这是一种增强HTML表格功能的技术，通过使用特定的插件——`jquery.tablegroup.js`，可以将表格数据进行逻辑上的分组，使得数据呈现更加有条理，用户浏览时更加高效。 `jquery....
动态添加行时，我们可以使用`clone(true)`来克隆第一行，确保新行的事件处理同样有效： ```javascript var vTrClone = $("#trDataRow1").clone(true); vTrClone.appendTo($("#tbin")); // 添加到表格中 ``` 统计总...
在datagrid的onLoadSuccess事件增加代码处理。 <style type=text/css> .subtotal { font-weight: bold; }/*合计单元格样式*/ ... $('#table').datagrid('appendRow', { Saler: '合计</span>', T
5. **行模板**：对于有复杂结构的行，可以使用行模板自定义每个单元格的内容。 6. **子网格**：在主网格内嵌套子网格，实现层次化数据的展示。 ### 四、最佳实践与优化 1. **性能优化**：合理设置分页大小、延迟...
进入界面，刷新触发onload方法跳转到JS代码，可以对购物车内商品数量进行增加-减少，商品价格自动统计、当更改商品数量的输入框value值时，整个购物表商品的价格，商品的小计和总计会根据数量发生变化。 话不多说...
在本文中，我们将深入探讨基于JQuery构建的整体Web框架，以及如何利用各种插件来增强网页功能和用户体验。JQuery作为一个强大的JavaScript库，简化了DOM操作、事件处理、动画效果和Ajax交互，使得开发人员能够更高效...
总的来说，jqTable是一款功能全面、灵活易用的jQuery表格插件，它集成了动态数据加载、表格固定、多级表头、复选框选择、批量处理、二级列表、自适应布局、排序和合计等多种功能，能够满足开发人员在构建交互式数据...
* rowspans 合并多列字段 用,隔开 注意:最好查询时使用排序后合并 * rowspan 合并一列字段 注意:最好查询时使用排序后合并 * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换 ...
3. **CSV（逗号分隔值）文件**：CSV是一种通用的数据交换格式，使用逗号来分隔每个字段。这种格式简单且兼容性强，大多数电子表格软件都能读取CSV文件。通过将HTML表格导出为CSV，用户可以确保数据在不同系统间无缝...
`keyup`事件的回调函数中，首先隐藏所有表格的行`$('table tbody tr').hide()`，然后使用jQuery的`:contains`选择器筛选出包含用户输入值的行，并显示出来：`.filter(":contains('" + ($(this).val()) + "')").show...
例如，如果字段名是 "companyTypeName"，那么会根据这个字段的值来决定哪些单元格需要被合并。 3. `colspan`：表示合并的列数。如果一个单元格要跨多列，这里设置它的跨度。 4. `target`：这是目标表格对象，通常是...
这个插件允许用户在浏览器上创建、编辑和管理数据，具有高度自定义的选项和丰富的API，使得开发者能够轻松地集成到自己的项目中。 **核心特性** 1. **灵活的布局**：jExcel支持各种单元格类型，包括文本、数字、...
- 表格（`<table>`）通常由行（`<tr>`）和单元格（`<td>`）组成。每个单元格可能包含简短的信息，而详细的数据显示在隐藏的元素（如`<div>`）中。 - 隐藏的详细信息可以使用CSS的`display:none`属性来实现，以便在...
如果没有使用jQuery，也可以使用原生JavaScript的DOM操作方法，例如`document.getElementById("tbody1").innerHTML = tableData;`，效果相同。 需要注意的是，在生成的HTML代码中，如果已经有双引号包裹的内容，...
响应式设计意味着无论在桌面、平板还是手机上，页面都能自动适应不同设备的屏幕尺寸，提供良好的用户体验。 1. **栅格系统**：Bootstrap的栅格系统是其核心组成部分，允许开发者通过简单的类名定义页面布局。它将...
综上所述，“DataGrid例子”这个主题主要涵盖了使用jQuery EasyUI创建交互式数据表格的方法，以及其在实际开发中的应用和高级特性。通过学习和实践这个例子，开发者可以更好地掌握如何利用DataGrid组件提升Web应用的...
在`niceforms.js`中，可能实现了当鼠标移动到表格上时，自动选中一行和一列的功能。这通常涉及到事件监听和DOM操作。例如，使用jQuery库实现这个功能： ```javascript $(document).ready(function() { $('table tr...
5. **优化用户体验**：为了提供更好的交互体验，可以考虑在用户选择特定行或搜索关键字后，自动更新`echarts`图表，展示与之相关的数据分析。 6. **响应式设计**：考虑到不同设备的屏幕大小，还需要对界面进行响应...
此外，还可以使用`<colgroup>`和`<col>`标签来对列进行样式控制，或者使用`<tfoot>`来为表格添加总计行。例如： ```html ;" /> ;" /> ;" /> ;">总计: ``` 在实际应用中，HTML表格可以与其他元素如图片、...
总的来说，【draft-fanatsy-table-scrape】项目利用JavaScript实现了自动化抓取和处理梦幻体育数据的功能，为玩家提供了实时、全面的数据支持，有助于提升游戏策略和决策制定。通过深入学习和理解这个项目，不仅可以...