`

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

    博客分类：
  • j2ee
 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js动态操作表格</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(){
  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>

 

分享到：
| jsp 导出excel（利用excel本身另存为html ...
评论
发表评论

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

相关推荐

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

    2. **添加、删除行、列及单元格**：这是动态操作表格的主要功能，可以分别对表格的行、列和单元格进行添加和删除操作，以实现更为灵活的表格数据处理。 ### 描述知识点 文档的描述部分提到了对上述知识点的分析和...

    javascript动态操作表格

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

    javascript动态添加表格数据行

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

    javascript 动态创建表格：新增、删除行和单元格.zip

    本压缩包中的"javascript 动态创建表格：新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先，我们要理解表格在HTML中的基本结构，它由`&lt;table&gt;`元素包含，内部包含`...

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

    - **创建新行**：要向表格添加行，首先需要创建一个新的`&lt;tr&gt;`元素，然后创建`&lt;td&gt;`元素并设置其内容。最后，将这些元素添加到表格的`&lt;tbody&gt;`标签内。 - **删除行**：通过获取行的引用（例如，通过点击事件的`...

    javascript动态创建表格

    JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两种方式 1. 使用 `appendChild()` ...

    vue+elementUI实现动态表格合并单元格.zip

    在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...

    JAVASCRIPT自动添加表格

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

    JavaScript动态添加表格行（使用模板、标记）

    在JavaScript编程中，动态添加表格行是一项常见的任务，特别是在创建数据展示或编辑功能时。本文将深入探讨如何使用模板和标记技术来实现这一功能。首先，我们先了解一下基本概念。 **1. 模板（Template）** 模板是...

    table-rowspan表格自动合并单元格插件

    "table-rowspan表格自动合并单元格插件"是专为HTML表格设计的一种工具，它允许开发者通过简单的操作实现单元格的动态合并、添加和删除，极大地提升了用户界面的可读性和交互性。以下是对这个插件及相关知识点的详细...

    JavaScript操作表格

    本篇内容主要介绍了使用JavaScript进行表格操作的方法，包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术，可以实现更加灵活的...

    javascript表格操作

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

    java 手动，用代码添加表格的行和列

    通过上述过程，我们了解了如何在Java环境下，利用HTML和JavaScript动态地向表格添加行和列。这种方法增强了网页的动态性和交互性，使得数据展示更加灵活多变，极大地提升了用户体验。同时，这也展示了前后端协同工作...

    纯javascript增加删除表格行

    2. **新增行**：要向表格添加新行，首先需要创建一个`&lt;tr&gt;`元素，然后为该行添加单元格（`&lt;td&gt;`）。这可以通过`document.createElement()`方法实现，最后使用`appendChild()`将新行添加到表格的`&lt;tbody&gt;`元素中。...

    动态添加/删除表格行并提交内容到后台

    总结起来，实现动态添加/删除表格行并提交内容到后台的过程涉及前端JavaScript的事件监听、DOM操作以及AJAX请求，后端C#的HTTP请求处理和数据库操作。这种功能在实际项目中非常常见，对于初学者来说，理解并掌握这些...

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...

    JavaScript动态生成表格案例

    然后获取了表格元素及其 tbody 元素，通过 for 循环遍历数组中的每个学生，动态创建了表格的每一行和每个单元格，并将学生的信息填充到对应的单元格中。 最后，为每行的删除操作添加了点击事件处理程序。当用户单击...

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