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

JS操作表格

 
阅读更多 
<TABLE width="500" border="1" cellpadding="5" cellspacing="0" onClick="setPos(this)" onKeyUp="sum(this)" id="t">
<TR>
<TD><div contentEditable>项目部门</div></TD>
<TD><div contentEditable>部门1</div></TD>
<TD><div contentEditable>部门2</div></TD>
<TD><div contentEditable>部门3</div></TD>
<TD><div contentEditable>统计</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物1</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物2</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物3</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物4</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物5</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>总计</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
</TR>
</TABLE>
<input type="button" value="加一行" onClick="insertRow(document.all.t)">
<input type="button" value="加一列" onClick="insertCell(document.all.t)">
<input type="button" value="删除行" onClick="deleteRow(document.all.t)">
<input type="button" value="删除列" onClick="deleteCell(document.all.t)">
<input type="button" value="正序排列" onClick="ascRow(document.all.t)">
<input type="button" value="反序排列" onClick="descRow(document.all.t)">
<br>
<input type="button" value="横向正序排列" onClick="ascCell(document.all.t)">
<input type="button" value="横向反序排列" onClick="descCell(document.all.t)">
<input type="button" value="全部数据统计" onClick="getSum(document.all.t,'total')">
<input type="text" value="0" name="total" style="width:50">
<SCRIPT LANGUAGE="JavaScript">
var currRow="0";
var currCell="0";
function getSum(obj,objName){
	var sum=0;
    for(var i=1;i<obj.rows.length-1;i++){
        for(var j=1;j<obj.rows[i].cells.length;j++){sum+=parseInt(obj.rows[i].cells[j].innerText);}
	}
	document.getElementsByName(objName)[0].value=sum;
}

//正序排列
function ascCell(obj){
	if(currCell>=1&&currRow>=1){
		var len=obj.rows[0].cells.length;
		for(var j=0;j<len;j++){
			var order=0;
			for(var i=1;i<len-2;i++){
				if(parseInt(obj.rows[currRow].cells[i].innerText)>parseInt(obj.rows[currRow].cells[i+1].innerText)){
					for(var k=0;k<obj.rows.length;k++){
						var tmp=obj.rows[k].cells[i].innerHTML;
						obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
						obj.rows[k].cells[i+1].innerHTML=tmp;
					}
					order++;
				}
			}
			len--;
			if(order==0){break;}
		}
	}
	clear();
}

//反序排列
function descCell(obj){
	if(currCell>=1&&currRow>=1){
		var len=obj.rows[0].cells.length;
		for(var j=0;j<len;j++){
			var order=0;
			for(var i=1;i<len-2;i++){
				if(parseInt(obj.rows[currRow].cells[i].innerText)<parseInt(obj.rows[currRow].cells[i+1].innerText)){
					for(var k=0;k<obj.rows.length;k++){
						var tmp=obj.rows[k].cells[i].innerHTML;
						obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
						obj.rows[k].cells[i+1].innerHTML=tmp;
					}
					order++;
				}
			}
			len--;
			if(order==0){break;}
		}
	}
	clear();
}

//正序排行
function ascRow(obj){
	if(currCell>=1){
		var rows=obj.rows;
		var len=rows.length-2;
		for(var j=0;j<=rows.length-2;j++){
			var order=0;
			for(var i=1;i<len;i++){
				if(parseInt(rows[i].cells[currCell].innerText)>parseInt(rows[i+1].cells[currCell].innerText)){
					obj.moveRow(i,i+1);
					order++;
				}
			}
			len--;
			if(order==0){break;}
		}
	}
	clear();
}

//反序排行
function descRow(obj){
	if(currCell>=1){
		var rows=obj.rows;
		var len=rows.length-2;
		for(var j=0;j<rows.length-2;j++){
			var order=0;
			for(var i=1;i<len;i++){
				if(parseInt(rows[i].cells[currCell].innerText)<parseInt(rows[i+1].cells[currCell].innerText)){
					obj.moveRow(i,i+1);
					order++;
				}
			}
			len--;
			if(order==0){break;}
		}
	}
	clear();
}

//删除行
function deleteRow(obj){
	var rows=obj.rows.length;
	if(currRow>=1&&currRow<rows-1){obj.deleteRow(currRow);}
	clear();
	averCol(obj);
}

//删除列
function deleteCell(obj){
	if(currCell>=1&&currCell<obj.rows[0].cells.length-1){
		for(var i=0;i<obj.rows.length;i++){obj.rows[i].deleteCell(currCell);}
	}
	clear();
	averCol(obj);
}
function averCol(obj){
   var wh=obj.width;
   var cells=obj.rows[0].cells;
   for(var i=0;i<cells.length;i++){
        cells[i].width=Math.ceil(wh/cells.length);
   }
}
function insertRow(obj){
	if(currRow>=0&&currRow<obj.rows.length-1){
		var maxCell=obj.rows[0].cells.length;
		obj.insertRow(currRow+1);
		for(var i=0;i<maxCell;i++){
			obj.rows[currRow+1].insertCell(i);
			obj.rows[currRow+1].cells[i].innerHTML="<div contentEditable>0</div>";
		}
		clear();
		averCol(obj);
		chnBgcolor(obj,currRow,"ffffff");
	}
}
function insertCell(obj){
	if(currCell&&currCell!=obj.rows[0].cells.length-1){
		for(var i=0;i<obj.rows.length;i++){
			obj.rows[i].insertCell(currCell+1);
			obj.rows[i].cells[currCell+1].innerHTML="<div contentEditable>0</div>";
		}
		clear();
		averCol(obj);
		chnBgcolor(obj,currRow,"ffffff");
	}
}
function check(obj){
	var k=parseInt(obj.innerText);
	if(isNaN(k)){
		obj.childNodes[0].innerText=0;
		return 0;
	}else{
		obj.childNodes[0].innerText=k;
		return k;
	}
}
function sum(obj){
    var o=event.srcElement;
	var total=0;
	var tindex=obj.rows.length-1;
	if(o.parentElement.tagName=="TD"&&o.parentElement.cellIndex>=1&&o.parentElement.parentElement.rowIndex>=1){
		var index=o.parentElement.cellIndex;
		var pindex=o.parentElement.parentElement.rowIndex;
		for(var i=1;i<tindex;i++){
			var num=check(obj.rows[i].cells[index]);
			total=parseInt(total)+num;
		}
		var total1=0;
		for(i=1;i<obj.rows[pindex].cells.length-1;i++){total1+=check(obj.rows[pindex].cells[i]);	}
		obj.rows[pindex].cells(obj.rows[pindex].cells.length-1).innerText=total1;
		obj.rows[tindex].cells[index].innerText=total;
		obj.rows[tindex].cells(obj.rows[0].cells.length-1).innerText=addAll(obj);
	}
	setPos(obj);
}

function chnBgcolor(obj,index,color){
	for(var i=0;i<obj.rows.length;i++){
		if(i==index){
			obj.rows[i].bgColor=color;
		}else{
			obj.rows[i].bgColor="ffffff";
		}
	}
}
function setPos(obj){
	var o=event.srcElement;
	if(o.tagName=="DIV"){
		currRow=o.parentElement.parentElement.rowIndex;
		currCell=o.parentElement.cellIndex;
		chnBgcolor(obj,currRow,"dedede");
	}else if(o.tagName=="TD"){
		currRow=o.parentElement.rowIndex;
		currCell=o.cellIndex;
	}else{
		currRow=obj.rows.length-1;
		currCeil=obj.rows[0].cells.length-1;
	}
}
function clear(){
   currRow=0;
   currCell=0;
}
function addAll(obj){
   var total=0;
   for(var i=1;i<obj.rows[0].cells.length-1;i++){total+=parseInt(obj.rows[obj.rows.length-1].cells[i].innerText);}
   return total;
}
</SCRIPT>

 

分享到：
| 不打印页面的页眉页脚
评论
发表评论

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

相关推荐

    js操作表格的方法介绍

    在JavaScript中，操作表格是一种常见的任务，特别...通过不断学习和实践，你可以熟练掌握JavaScript操作表格的各种技巧。参考提供的博文链接（https://zyz.iteye.com/blog/1743610），可以获取更多详细信息和示例代码。

    js操作表格

    js操作表格 实例 js操作表格 实例 js操作表格 实例

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中，我们首先看到了一个简单的示例，展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤： 1. **获取容器元素**：通过`...

    js简单表格操作

    在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`&lt;table&gt;`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...

    JS操作表格代码CRUD操作(很完整)

    总的来说，JS操作表格的核心在于理解DOM API，如`getElementById`，`createElement`，`appendChild`，`textContent`等属性和方法。通过这些工具，我们可以轻松地实现对HTML表格的数据操作。这个例子中的代码提供了...

    javascript操作表格.doc

    以下是关于JavaScript操作表格的一些关键知识点： 1. **DOM操作**：JavaScript通过Document Object Model (DOM)来访问和修改HTML元素。在这个例子中，`document.getElementById`函数用于获取页面上的元素，如按钮和...

    JAVASCRIPT自动添加表格

    在提供的压缩包文件“JS操作表格大全”中，可能包含了各种JavaScript操作表格的实例代码，包括但不限于以上所述的添加和删除操作，还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例，将有助于提升你对...

    js操作表格， 带初始化的

    在JavaScript编程中，操作表格是一项常见的任务，尤其是在网页交互和数据展示方面。在这个主题中，我们将深入探讨如何使用JavaScript来创建、初始化、增加和删除表格元素。以下是一份详细的指南，帮助你理解并掌握...

    js 操作表格动态添加和删除行

    js 操作表格动态添加和删除行

    js 操作 表格 操作 常用方法

    表格操作常用方法! 值得下载看看!资源免费,大家分享!!

    javascript动态操作表格

    在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`&lt;table&gt;`...

    JS操作Word生成表格

    在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...

    js控制操作表格

    以下是一些关于使用JavaScript操作表格的关键知识点： 1. HTML表格基础：HTML `&lt;table&gt;` 标签用于创建表格，`&lt;tr&gt;` 代表行，`&lt;td&gt;` 代表单元格，而`&lt;th&gt;` 用于表头。了解这些基础元素是进行JS操作的前提。 2. DOM...

    js 获取表格内容

    为了更好地理解和掌握JavaScript操作表格的方法，建议读者进行以下实践： - 使用上述方法创建一个简单的表格，尝试获取其中的数据并显示出来。 - 探索更多有关`table`元素的属性和方法，以便更灵活地处理表格数据。 ...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    javascript 操作表格

    在本文中，我们将深入探讨如何使用JavaScript来操作HTML表格，包括动态添加表格、添加行、添加列以及编辑表格内容。 1. **创建表格（Table）** 在HTML中，表格通常通过`&lt;table&gt;`元素定义，而JavaScript可以用于...

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用，尤其适合初学者进行学习和实践。 首先，`students.html`文件很可能是用来展示表格结构...

    javascript操作表格并统计行数

    主要用到了元素的克隆，如何在各浏览器中兼容，并且在IE中如何统计动态操作后的行列数

    纯js电子表格操作

    "纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据，如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**： js-xlsx是JavaScript的一个开源库，专门用于处理Excel...

    JavaScript范例宝典之-07 操作表格.CHM

    JavaScript范例宝典 javascript工作中实例参考的很有帮助哦，留给自己以后工作中备用；另外因为整个文件很大(超过了csdn的限制15M)，本人不得已按功能拆分上传。上传耗了我快一个小时，希望大家支持

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