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

js动态操作表格

    博客分类:
  • web
阅读更多
原文地址:
http://www.codefans.net/jscss/code/932.shtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js动态操作表格-www.codefans.net</title>
<script language="javascript">
 function init(){  
     _table=document.getElementById("table");
	 _table.border="1px";
	 _table.width="800px";
	
 	for(var i=1;i<6;i++){
		 var row=document.createElement("tr");  
		 row.id=i;
		 for(var j=1;j<6;j++){
			 var cell=document.createElement("td");  
			 cell.id=i+"/"+j;
			 cell.appendChild(document.createTextNode("第"+cell.id+"列"));  
			 row.appendChild(cell);  
		 }
		 document.getElementById("newbody").appendChild(row);  
	 }
 }  
 
 function rebulid(){
 	var beginRow=document.getElementById("beginRow").value;/*开始行*/
	var endRow=document.getElementById("endRow").value;/*结束行*/
	/*/*/
	var beginCol=document.getElementById("beginCol").value;/*开始列*/
	var endCol=document.getElementById("endCol").value;/*结束列*/
	
    var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
	alert(tempCol);
	var td=document.getElementById(tempCol);
	for(var x=beginRow;x<=endRow;x++){
		for(var i=beginCol;i<=endCol;i++){
		  if(x==beginRow){
			document.getElementById("table").rows[x].deleteCell(i+1);
		  }
		  else{
		     document.getElementById("table").rows[x].deleteCell(i);
		  }
			
		}
	}
	td.rowSpan=(endRow-beginRow)+1;
}
 /*添加行,使用appendChild方法*/
 function addRow(){
   var length=document.getElementById("table").rows.length;
   /*document.getElementById("newbody").insertRow(length);
   document.getElementById(length+1).setAttribute("id",length+2);*/
   var tr=document.createElement("tr");
   tr.id=length+1;
   var td=document.createElement("td");
   for(i=1;i<4;i++){
   	td.id=tr.id+"/"+i;
	td.appendChild(document.createTextNode("第"+td.id+"列"));
	tr.appendChild(td);
   
   }
  document.getElementById("newbody").appendChild(tr);  
 } 
 
 function addRow_withInsert(){
 	var row=document.getElementById("table").insertRow(document.getElementById("table").rows.length);
	var rowCount=document.getElementById("table").rows.length;
	
	var countCell=document.getElementById("table").rows.item(0).cells.length;
    for(var i=0;i<countCell;i++){
	  var cell=row.insertCell(i);
	 
	  cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
	  cell.id=(rowCount)+"/"+(i+1);
	  
	  }
 }
 
 /*删除行,采用deleteRow(row Index)*/
 function removeRow(){
  /* var row=document.getElementById("2"); 
   var index=row.rowIndex;
   alert(index);*/
   document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex); 
 }
 
 /*添加列,采用insertCell(列位置)方法*/
 function addCell(){
 /*document.getElementById("table").rows.item(0).cells.length
  用来获得表格的列数
 */
    for(var i=0;i<document.getElementById("table").rows.length;i++){
		var cell=document.getElementById("table").rows[i].insertCell(2);
		cell.innerHTML="第"+(i+1)+"/"+3+"列";
		
	}
 }
 /*删除列,采用deleteCell(列位置)的方法*/
 function removeCell(){
	for(var i=0;i<document.getElementById("table").rows.length;i++){
		document.getElementById("table").rows[i].deleteCell(0);
	}
}
</script>
</head>

<body onLoad="init();">

 <table  id="table" align="center">  
     <tbody id="newbody"></tbody>  
	 
 </table> 
  <div>
 	<table width="800px" border="1px" align="center">
		<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/></td><td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="删除行"/></td></tr>
	  <tr><td align="center"><input type="button" id="delCell" name="delCell"  onClick="removeCell();" value="删除列"/></td><td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="添加列"/></td></tr>
	 <tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows"  onClick="addRow_withInsert();" value="添加行"/></td></tr>
	</table>
 </div>
 <div>
 	<table width="800px" border="1px" align="center">
		<tr><td>从第<input type="text" id="beginRow" name="beginRow"  value=""/>行到<input type="text"  name="endRow"  id="endRow" value=""/>行</td><td rowspan="2"  id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid();"/></td></tr>
	  <tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/>列到<input type="text" name="endCol" id="endCol" value=""/>列</td></tr>
	</table>
 </div>
</body>
</html>

分享到:
评论

相关推荐

    javascript动态操作表格

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

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    table.js动态操作表格

    用于动态操作表格~~~~~~~~~~~~~~~~~~~~~~·

    JavaScript动态操作表格实例(添加,删除行,列及单元格)

    js动态操作表格&lt;/title&gt;[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i&lt;6;i++){var row=document.createElement(“tr...

    js动态生成表格

    在JavaScript(JS)中动态生成表格是一项常见的任务,特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能,以及相关的源码和工具。 首先,我们要明白HTML表格的基本结构,它由`&lt;table&gt;`、`...

    js动态表格--行操作

    "js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先,我们需要理解HTML表格的基本结构,包括`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;th&gt;`和`&lt;td&gt;`等元素。`...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JS操作Word生成表格

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

    js表格操作,DOM实现数据动态增删查改

    本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能,这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`&lt;table&gt;`元素创建表格结构,包括`&lt;thead&gt;`定义表头,`...

    js简单表格操作

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

    JavaScript动态添加删除表格行

    在HTML中,`&lt;table&gt;`元素用于创建表格,而动态操作表格行通常涉及到DOM(Document Object Model)的操作。JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...

    javascript表格操作

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

    JS动态增加删除表格行

    在JavaScript(JS)编程中,动态管理HTML元素是常见的需求,特别是对于表格(Table)这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    js读取json数据动态生成列数不固定的表格

    3. **DOM操作**:在获取到JSON数据并解析为JavaScript对象后,我们需要操作DOM(Document Object Model)来生成表格。HTML的`&lt;table&gt;`元素是创建表格的基础,`&lt;tr&gt;`表示行,`&lt;th&gt;`表示表头,`&lt;td&gt;`表示单元格。我们...

    js操作表格

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

Global site tag (gtag.js) - Google Analytics