`

Jquery 操作Table

阅读更多
  • 最近做了的项目,页面动态操作特别多,要两个Table之前项目交互移入移除操作,下面是对Jquery 操作Table的一些方法和属性做了一个简单的总结

function addCustomer(url) {
	if (!packageFlag) {
		alert('包外客户列表在刷新中...请稍等操作');
		return;
	}
	
	var trCount = 0;
	var addTable = $(document.getElementById("addTable")).find("tr:eq(0)");
 	$(document.getElementById("outPackageList").contentWindow.document.getElementById("outPackageCustomerId")).find("tr:gt(0)").each(function(index, item){
		if($(item).find("[name=outCheckbox]")[0].checked){
			var pk = $(item).find("[name=outCheckbox]").val();
			var isSelected = false;
			$("#innerPackageCustomer tr:gt(0)").each(function(index2, item2){
				var pk2 = $(item2).find("[name=outCheckbox]").val();
				if (pk == pk2){
					isSelected = true;
					return false;
				}
			});
			var initFirstTr = $("#innerPackageCustomer").find("tr:eq("+trCount+")");
			if(!isSelected){ 
				$(initFirstTr).after(
					"<tr onMouseOver=\"this.bgColor=\'#eef0fe'\" onMouseOut=\"this.bgColor='#FFFFFF'\">"+
						$(item).html()+
					"</tr>"
				);
				$(item).remove();
				$(initFirstTr).next("tr").find("td:eq(2)").html('加入');
				trCount++;
				//每次添加完后把复选框取消掉勾		
				$("#innerPackageCustomer").find("tr:eq("+trCount+")").find("[name=outCheckbox]")[0].checked=false;
			}
			/**添加临时值*/
		
			$(addTable).after(
				"<tr><td>"+
					  +pk+
				"</td></tr>"
			);
				
			/**动态计算总佣金和总资产*/
			var asset = $.trim($(item).find("td:eq(10)").text());
			var fare = $.trim($(item).find("td:eq(11)").text());
	 	  
			var tempAsset = $.trim($("[name=packageInfo.tempAsset]").val());
			var tempFare  = $.trim($("[name=packageInfo.tempFare]").val());
		 
			var assetVal = 0;
			var fareVal = 0;
			var tempAssetVal = 0;
			var tempFareVal = 0;
			
			if(isNotEmpty(asset) && asset!='0.00') {
				assetVal = asset;
			}if(isNotEmpty(fare) && fare!='0.00'){
				fareVal= fare;
			}if(isNotEmpty(tempAsset) && tempAsset!='0.00' && tempAsset!='0'){
				tempAssetVal= tempAsset;
			}if(isNotEmpty(tempFare) && tempFare!='0.00' && tempFare!='0'){
				tempFareVal= tempFare;
			} 
		 
			sumAsset=accAdd(tempAssetVal,assetVal);
			sumFare=accAdd(tempFareVal,fareVal);
			
			/**动态计算总佣金和总资产*/
			$("[name=packageInfo.tempAsset]").val(parseFloat(sumAsset,2).toFixed(2));
			$("[name=packageInfo.tempFare]").val(parseFloat(sumFare,2).toFixed(2));
		}
	});
}

分享到:
评论

相关推荐

    jQuery操作Table技巧大汇总

    jQuery操作Table技巧大汇总主要涵盖了如何使用jQuery对HTML表格进行一系列的交互和样式修改,包括鼠标响应、样式调整、行和列的隐藏与删除,以及单元格内容的获取与设置等。以下是对这些技巧的详细解释: 1. 鼠标...

    jquery 操作 table

    ### jQuery操作Table知识点详解 #### 一、简介 在网页开发过程中,经常需要对表格(Table)进行操作,如修改样式、添加或删除行等。jQuery作为一种轻量级的JavaScript库,提供了强大的DOM操作功能,使得这些操作变...

    jquery操作table

    在jquery里操作table表格的各种方法,希望希望对大家有帮助

    Jquery操作 table

    ### 二、jQuery操作表格的基本方法 #### 1. 选择表格 - **选择整个表格**:`$('#testtable')` - **选择表格的所有行**:`$('#testtable tr')` - **选择特定行**:`$('#testtable tr:eq(1)')` // 选择第二行(索引从...

    用jquery-table2excel,进行导出excel表格 带图片 jquery.table2excel.js下载

    接下来,我们需要引入`jquery.table2excel.js`,这是`jquery-table2excel`插件的主要源代码文件。这个插件的核心思想是利用浏览器的`data:`URI scheme和`window.navigator.msSaveBlob`(针对IE浏览器)或`a.download...

    jQuery操作Table

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对表格(Table)的操作。本文将深入探讨如何使用jQuery来实现表格的动态添加和删除功能。 首先,理解HTML表格的基本结构至关重要。...

    jquery.table2excel.js.zip

    《使用jQuery插件jQuery.table2excel.js将HTML表格导出为Excel文件》 在现代Web开发中,数据的展示和管理往往离不开表格。HTML表格因其结构清晰、易于阅读,成为了网页上常用的数据呈现方式。然而,当用户需要保存...

    jquery.table2excel

    除了基本的导出功能,jQuery.table2excel还可以与其他jQuery插件(如Datatables)结合使用,为复杂的数据展示和操作提供更强大的支持。同时,开发者也可以根据实际需求对其进行二次开发,例如添加自定义样式到导出的...

    js jquery实现table假分页

    6. **动态显示数据**:根据当前页码,从数据集中提取对应的数据块,然后使用jQuery操作DOM将这些数据显示在表格的`&lt;tbody&gt;`中。 7. **状态维护**:需要记录当前页码和每页显示的条目数,确保用户在页面之间导航时能...

    jQuery表格键盘操作插件 jquery KeyTable调用示例.rar

    jQuery表格键盘操作插件 jquery KeyTable调用示例,这款插件允许用户在表格移动/选择数据像键盘操作Excel那样,不依赖鼠标就可完成各项操作.并且高亮当前操作的表格单元格.运行效果请参见截图,本源码包内含有调用本...

    jquery uI TABLE

    《jQuery UI Table:深入解析与应用实践》 jQuery UI Table是一款基于jQuery库的插件,用于创建功能丰富的表格。在Web开发中,表格是展示数据的常见方式,jQuery UI Table通过提供可定制的样式和交互功能,使得网页...

    jqueryTable编辑的实现

    首先,`jQuery`是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在`jQuery Table`编辑场景中,`jQuery`用于添加交互性,使得用户能够轻松地编辑表格内容。 要实现鼠标点击表格...

    jquery.table2excel.js

    3. 调用插件:在jQuery的`$(document).ready()`函数内,使用`.table2excel()`方法对表格进行操作。 ```javascript $("#myTable").table2excel({ // (可选) Excel文件的名称 name: "Worksheet Name", // (可选) ...

    jQuery table scroll表格插件内容部分加滚动条

    总之,jQuery Table Scroll插件为网页中的大型表格提供了便捷的滚动条解决方案,使得用户可以在有限的屏幕空间内查看和操作大量数据。通过合理地配置参数和结合其他前端技术,你可以创建出高效且用户体验良好的数据...

    jquery-table2excel

    jQuery简化了DOM操作,使得开发者可以快速地选择、操作和修改HTML元素,包括表格(table)。在HTML中,表格由`&lt;table&gt;`标签定义,包含`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头)等元素。jQuery提供了一系列...

    基于jquery的table表头固定

    "基于jQuery的table表头固定"通常涉及到以下关键技术点: 1. **分离表头和主体**:首先,我们需要将HTML表格的thead部分与tbody部分分离,这样在进行滚动操作时,thead可以独立于tbody进行定位。 2. **CSS定位**:...

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...

    jQuery实现Table分页跳转

    jQuery是一个轻量级的JavaScript库,它提供了一系列方便、高效的方法来操作DOM,实现复杂的交互效果,包括Table的分页功能。本教程将详细讲解如何使用jQuery实现Table的分页跳转。 一、jQuery分页原理 jQuery分页...

    jQuery获取table下某一行某一列的值实现代码

    通过上述知识点,我们可以了解如何使用jQuery操作DOM来处理表格中的数据。在实际应用中,我们通常会根据具体的表格布局和需求,选择合适的选择器和遍历方法来获取或操作表格中的数据。通过上述方法的灵活运用,可以...

Global site tag (gtag.js) - Google Analytics