`
zithan
  • 浏览: 180075 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

实例讲解JS复选框动态计算表格每列总和

J#JavaScriptXHTMLHTML 
阅读更多

 

 

<!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=gb2312" />

<title>无标题文档</title>

<SCRIPT LANGUAGE="JavaScript">

<!--

 

function countNum(e) {

var tab=document.getElementById("abc");

var obj=e.parentNode.parentNode;  

var id=parseInt(obj.rowIndex)-1; 

var checkbox=document.getElementsByName("checkbox");

var sumStr01 = 0;

var sumStr02 = 0;

var sumStr03 = 0;

var sumStr04 = 0;

for(var j=0;j <checkbox.length;j++)  

{  

if(document.getElementsByName("checkbox")[j].checked){

var num = parseInt(tab.rows[j+1].cells[1].innerText);

sumStr01 = parseInt(sumStr01) + num;

 

var num = parseInt(tab.rows[j+1].cells[2].innerText);

sumStr02 = parseInt(sumStr02) + num; 

 

var num = parseInt(tab.rows[j+1].cells[3].innerText);

sumStr03 = parseInt(sumStr03) + num; 

 

var num = parseInt(tab.rows[j+1].cells[4].innerText);

sumStr04 = parseInt(sumStr04) + num; 

//alert(tab.rows[j+1].cells[1].innerText);

 }

}  

sum01.innerHTML =sumStr01; 

sum02.innerHTML =sumStr02; 

sum03.innerHTML =sumStr03; 

sum04.innerHTML =sumStr04; 

}

//-->

</SCRIPT>

</head>

 

<body>

<table id="abc" width="1000" border="1" cellspacing="10" cellpadding="10">

  <tr>

    <th scope="col">操作</th>

    <th scope="col">A</th>

    <th scope="col">B</th>

    <th scope="col">C</th>

    <th scope="col">D</th>

  </tr>

  <tr>

    <td><div align="center">      

        <input type="checkbox" name="checkbox" value="checkbox" onclick='countNum(this);'/>

      </div></td>

    <td><div align="center" name="amount">1</div></td>

    <td><div align="center" name="amount">5</div></td>

    <td><div align="center" name="amount">3</div></td>

    <td><div align="center">41</div></td>

  </tr>

  <tr>

    <td><div align="center">

      <input type="checkbox" name="checkbox" value="checkbox" onclick='countNum(this);'/>

    </div></td>

    <td><div align="center" name="amount">5</div></td>

    <td><div align="center" name="amount">6</div></td>

    <td><div align="center" name="amount">7</div></td>

    <td><div align="center">85</div></td>

  </tr>

  <tr>

    <td><div align="center">

      <input type="checkbox" name="checkbox" value="checkbox" onclick='countNum(this);'/>

    </div></td>

    <td><div align="center" name="amount">9</div></td>

    <td><div align="center" name="amount">10</div></td>

    <td><div align="center">11</div></td>

    <td><div align="center">12</div></td>

  </tr>

  <tr>

    <td><div align="center">总计</div></td>

    <td><div align="center" id="sum01">0</div></td>

    <td><div align="center" id="sum02">0</div></td>

    <td><div align="center" id="sum03">0</div></td>

    <td><div align="center" id="sum04">0</div></td>

  </tr>

</table>

</body>

</html>

2
顶
1
踩
分享到：
| 使用JIRA搭建企业问题跟踪系统(转自Judy S ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    QT QTreeWidget添加复选框

    当我们需要在树形结构中实现选择功能时，可以给QTreeWidget的每一项添加复选框，以便用户可以选择单个或多个节点。这个过程涉及到Qt的自定义item delegate以及信号和槽的机制。 首先，我们要理解QTreeWidgetItem类...

    Qt之QTableView添加复选框

    对于表头，设置QTableView的horizontalHeader的itemDelegate为自定义委托，这样表头的每一节都可以使用复选框。 5. **数据模型的处理**： 需要确保数据模型能够存储复选框的状态。这可能意味着扩展...

    listview添加复选框

    下面将详细讲解如何在C#的ListView中添加复选框，实现全选、反选功能。 首先，让我们了解ListView控件的基本结构。ListView通常包含多个列（Columns），每列可以显示不同类型的数据显示，如文本、图片等。在...

    MFC CListBox及CTreeCtrl具有复选框功能

    通过设置每个列表项的数据关联一个布尔值，表示复选框的状态，并在用户交互时更新这个状态。 3. **用户交互**：处理LB_SELCHANGING消息可以检测用户是否选择了某个项，然后根据需要更新数据并重新绘制项。 ### ...

    Pyqt5 QTableWidget/QTableView 行表头添加复选框全选功能

    本篇文章将详细探讨如何在`QTableWidget`或`QTableView`的表头中添加复选框，并实现全选/全不选的功能。 首先，我们需要了解`QTableWidgetItem`和`QHeaderView`。`QTableWidgetItem`是`QTableWidget`中的基本元素，...

    DataGridView 复选框全选。

    接着，遍历所有行，将每个复选框的值设置为`allChecked`。 此外，为了确保数据的一致性，你可能还需要监听`CurrentCellDirtyStateChanged`事件，当用户直接在单元格内改变复选框状态时，强制控件更新其值： ```...

    实例12复选框（java实例系列）

    本实例"实例12复选框"深入探讨了如何在Java应用程序中使用JCheckBox类来实现这一功能。下面将详细阐述相关知识点。 1. **Swing组件库**： Swing是Java提供的一个图形用户界面（GUI）工具包，它是Java Foundation ...

    带复选框的下拉框

    这种控件的设计思路是将传统的下拉列表扩展为一个多选列表，每个选项前都有一个复选框供用户选择。当用户点击下拉箭头时，会展示一个包含所有选项的列表，用户可以通过勾选复选框来选择他们感兴趣的项。 在实现这样...

    QT实现的treeView有复选框

    这个实例涉及到如何在`QTreeView`中实现带有复选框的节点，特别是主节点支持三态复选框功能。在QT中，这种功能可以通过自定义模型和视图来实现，以满足特定的用户交互需求。 首先，我们需要理解`QTreeView`的工作...

    带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选

    下面将详细讲解这个主题，包括复选框、多级目录树以及全选和反选的实现原理。 1. **复选框（Checkbox）**： 复选框是用户界面中常用的一种控件，它允许用户在多个选项中进行多选。在HTML中，`...

    带复选框的CTreeCtrl响应复选消息

    ### 带复选框的CTreeCtrl响应复选消息 在Windows编程中，`CTreeCtrl` 是一个非常常用且强大的控件，用于显示树形结构的数据。它支持多种风格，包括带有复选框的功能。本文将详细介绍如何在带有复选框的 `CTreeCtrl`...

    实例18 带复选框的树形控件

    在PowerBuilder中，带复选框的树形控件是一种常用的数据展示方式，它结合了树形结构的层次感和复选框的选择功能，让用户能够更直观地进行多级选择和操作。本实例18主要讲解如何在PowerBuilder应用程序中创建和使用...

    看实例学VFP：复选框控件

    【看实例学VFP：复选框控件】 在Visual FoxPro (VFP)中，复选框控件（CheckBox）是一种常用的用户界面元素，用于让用户进行是/否或者真/假的选择。在VFP的基础教程中，复选框控件的常用属性包括Caption（文本显示）...

    jquery 复选框组件

    jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细探讨jQuery中的复选框组件，特别是基于jQuery UI的Multiselect插件。 ### jQuery 复选框基础 在HTML中...

    QT 下拉框与复选框组合使用

    2. **初始化控件**：创建QComboBox和QCheckBox实例，为每个下拉框选项创建对应的复选框，并将它们添加到布局中。 3. **填充下拉框**：用`QComboBox::addItem()`方法填充下拉框，同时将OptionData对象关联到每个选项...

    datagridview点击复选框删除

    要在`DataGridView`中添加复选框列，首先需要创建一个`DataGridViewCheckBoxColumn`对象。这可以通过代码动态创建，或者在设计时通过属性窗口设置。例如： ```csharp DataGridViewCheckBoxColumn checkboxColumn ...

    Eclipse编写的Android复选框(仿购物车)应用实例

    在本实例中，我们将深入探讨如何使用Eclipse IDE V4.2.0开发一个基于Android的复选框应用，该应用模拟了购物车的功能。在Android编程中，复选框（CheckBox）是一种常用的UI组件，它允许用户进行多选操作，非常适合...

    9款超炫的 CSS3 复选框

    在实际应用中，这些CSS3复选框的实现通常会结合HTML和JavaScript，例如`index.html`可能包含这些复选框的结构和样式，而`jQuery经典插件大全-实例-教程-参数详解.url`可能指向一个关于如何使用jQuery增强复选框功能...

    QTableView添加复选框，下拉框控件

    在特定的开发场景中，我们可能需要增强QTableView的功能，例如为表格中的每一行添加复选框或者下拉框控件，以提供更多的交互方式。这个过程涉及到Qt的自定义 delegate（委托）机制以及信号与槽的连接。 首先，我们...

    js树状地区三级级联带复选框

    例如，使用Vue.js，你可以创建一个`v-for`循环来渲染树形结构，每个节点都是一个包含复选框的组件，组件的状态可以通过`v-model`与Vue实例的数据进行双向绑定。 如果压缩包中的文件名为“jstree”，那么很可能使用...

Magicbox
Global site tag (gtag.js) - Google Analytics