`

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动态操作表格实例(添加,删除行,列及单元格)

    主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    js动态操作表格

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

    JavaScript动态生成表格案例

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

    javascript操作table(增加/删除行/单元格)

    对表格的行和列进行插入/删除，并对每行添加行号

    【JavaScript源代码】JavaScript动态生成带删除行功能的表格.docx

    　本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码，供大家参考，具体内容如下　动态生成一个带删除行功能的表格：　实现思路　1、获取表格元素 2、获取要填充的数据，一般是从数据库取数据，也...

    JS实现页面创建表格.rar

    实现页面创建表格，和删除指定列、行单元格功能。利用JavaScript动态创建表格，可根据用户的使用需求动态添加指定列数、行数，删除指定列数、行数。删除成功或不成功时，会反馈给用户一个弹框提示，增强用户体验感。

    gapps-insert-delete-addon:用于向 Google 表格添加插入单元格和删除单元格的 Google Apps 脚本

    gapps-插入-删除-插件 这是为 Google 表格安装“插入和删除单元格”插件时正在运行的代码

    程序天下:JavaScript实例自学手册

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    《程序天下：JavaScript实例自学手册》光盘源码

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    merge-table:对HTML表格进行合并拆分操作

    HTML表格设计器可以快速的可视化设计一个表格，可以对单元格进行合并，拆分，添加，删除以及设置样式等操作，API简单易懂 ###第一步: grunt /*运行任务，生成js主文件*/ ###第二步: bower install /*安装依赖库*/ ##...

    JavaScript实现动态增删表格的方法

    在上方文本框填入”姓名/Email/ 年龄”，实现在下方表格中动态添加或删除单元格 效果： 1. Html代码： &lt;body&gt; 姓名 : &lt;input type=text id = username&gt; Email : &lt;input type=text id = email&...

    JavaScript网页特效范例宝典源码

    实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外阴影 329 实例211 立体表格 ...

    电子报表设计器雏形（版本2，最新，类似于网页版的简易Excel，附有详细注释）

    多删，多添均是删除或者添加当前被选取的单元格区域中行或者列的数目，添加时默认值为1. 折叠：拖拽行往左时该列的宽度为0或者负数时，可以实现该列的折叠，与excel相仿。 添加操作建议不要超过26列，因为Z列之后...

    gapps-insert-delete:用于将插入和删除单元格功能添加到表格的 Google 应用程序脚本

    gapps-插入-删除用于向 Google 表格添加插入单元格和删除单元格的 Google Apps 脚本复制 Code.gs 的内容并粘贴到 Google Sheets 的脚本编辑器中（覆盖现有 Code.gs 中的所有内容）。

    Simple_Google_Sheet

    对于添加/删除列/行： 使用onmousedown函数监视选定的单元格，然后获取其RowIndex和ColoumnIndex。 然后使用for循环遍历所有td元素添加/删除单元格或行。 单击行/列标题时，它将选择整个行/列。 然后，您可以删除...

    Squares_Test_assignment

    基本状态是4x4单元格的正方形，带有“添加行”（底部）和“添加列”（右侧）按钮。 像元大小为50像素。 当任何单元格都悬停时，应该会出现2个额外的按钮：删除行（左侧）和删除列（顶部）按钮： 删除按钮应出现在...

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