js动态操作表格

最新推荐文章于 2022-01-24 12:49:58 发布
最新推荐文章于 2022-01-24 12:49:58 发布
阅读量71 收藏
点赞数
分类专栏： web 文章标签： .net HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaocao000/article/details/83630935
版权
原文地址:
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>

xiaocao000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 动态创建表格
DB2菜鸟的专栏
11-24 1138
关键字: javascript 动态创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow(index)：ind
JavaScript动态操作表格实例(添加,删除行,列及单元格)
01-21
代码如下:<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″><title>js动态操作表格</title>[removed]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=
动态添加删除行
从心开始，重新开始
03-01 144
[code="html"] function add(obj) { var username = document.form.username.value;// 姓名 var flag = -1; //性别 for(var i=0;i
html表格添加编辑删除操作,JavaScript_JavaScript动态操作表格实例(添加,删除行,列及单元格)，复制代码 代码如下:<html>&l - phpStudy...
weixin_27064205的博客
07-04 248
JavaScript动态操作表格实例(添加,删除行,列及单元格)js动态操作表格function init(){_table=document.getElementById("table");_table.border="1px";_table.width="800px";for(var i=1;i<6;i++){var row=document.createElement("tr");ro...
JS表格的动态操作完整示例
10-15
在JavaScript中，动态操作表格是一种常见的需求，尤其是在创建交互式网页时。本示例将详细介绍如何使用JS进行表格的动态修改和删除操作。首先，我们需要理解HTML中的表格结构，一个表格由`<table>`标签定义，其中...
JQuery实现动态操作表格
10-20
动态操作表格是Web开发中常见的需求之一，尤其是在数据展示和管理方面，经常需要对表格数据进行动态的添加和删除行操作，以及对数据进行有效性验证。jQuery作为一个轻量级的JavaScript库，提供了简洁而强大的接口，...
js实现动态删除表格的行或者列-------Day57
麦田里
07-04 7743
让静态页面动起来，这句话有没有毛病啊....
js动态的添加删除表格的行和列
09-10 5372
声明：本文摘自网络 js动态操作表格  function init(){       _table=document.getElementById("table");   _table.border="1px";   _table.width="800px";     for(var i=1;i    var row=document.createElem
富文本编辑器以及表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
04-21
带富文本编辑器以及支持表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
08-12
对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。 js刷新、复选框全选，全不选，添加，拷贝，上下移动，删除功能实现。
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）...
lifeneedyou的专栏
04-29 344
       记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并 按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：   第1/1列 第1/2列 第1/3列 第1...
JavaScript动态操作表格，添加，删除行、列及单元格
11-07 1061
JavaScript动态操作表格，添加，删除行、列及单元格，还可以指定从第几列到第几列合并，这是一个很有参考价值的JS适时控制表格的一个功能，含有丰富的注释，方便大家研究学习。 js动态操作表格  function init(){        _table=document.getElementById("table"); _table.border="1px"; _t
Js操作表格-对表格单元格的添加删除修改
xyjikl
12-14 722
动态表格 动态表格彻底研究 对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 5 55 5 6 6 6 56 777 7 77 7 88
使用JavaScript动态生成表格，并实现删除操作
qq_46112274的博客
12-21 1118
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title>Document</t
使用JavaScript完成动态表格的添加与删除
qq_40922346的博客
08-17 413
使用JavaScript完成动态表格的添加与删除 概述 学习Javaweb的过程中，需要学习一些前端的知识，这一个学习起来有些吃力，所以记录一下，共同学习一下。 问题表述： 使用JavaScript完成一个动态表格的添加的小Demo，共有两种方法实现，第一种太过麻烦，已经被注释了，推荐学习使用第二种。 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
JavaScript学习笔记：动态添加与删除表格行
howard2005的专栏
12-04 984
JavaScript学习笔记：动态添加与删除表格 一、添加表格行与单元格 Javascript可以控制table，动态的插入行和单元格。rows保存着<tbody>元素中行的HTMLCollection。 语法：tableObject.insertRow(index) 该方法创建一个新的TableRow对象，表示一个新的<tr>标记，用于在表格中的指定位置插入一个新行，并返...
【用JS自制表格软件玩数据】7. 设计常用的样式功能与单元格合并
weixin_46596227的博客
01-24 808
目前，我们的表格软件的基础结构已经开发得差不多了。现在开始要设计一些字体修改，加粗，变斜，合并单元格等功能。具体功能就放在顶部的工具栏中。
JAVAScript动态生成表格
最新发布
05-27
JavaScript动态生成表格可以通过DOM操作来实现。以下是一些基本的步骤： 1. 首先创建一个table元素，并设置其属性（如id、border等）。 2. 创建thead元素和tbody元素，并添加到table中。 3. 创建tr元素作为thead中的一行，并创建th元素作为每列的标题。将th元素添加到tr中，再将tr添加到thead中。 4. 使用for循环或其他方法遍历数据，创建每个数据行，创建td元素用于每列数据。将td元素添加到tr中，再将tr添加到tbody中。 5. 将tbody添加到table中。 6. 最后将table元素添加到DOM中。 以下是一个简单的示例代码： ``` // 创建table元素 var table = document.createElement("table"); table.setAttribute("id", "myTable"); table.setAttribute("border", "1"); // 创建thead元素和tbody元素 var thead = document.createElement("thead"); var tbody = document.createElement("tbody"); // 创建thead中的一行 var tr = document.createElement("tr"); var th1 = document.createElement("th"); var th2 = document.createElement("th"); var th3 = document.createElement("th"); th1.innerHTML = "姓名"; th2.innerHTML = "年龄"; th3.innerHTML = "性别"; tr.appendChild(th1); tr.appendChild(th2); tr.appendChild(th3); thead.appendChild(tr); // 遍历数据，创建每个数据行 for (var i = 0; i < data.length; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); td1.innerHTML = data[i].name; td2.innerHTML = data[i].age; td3.innerHTML = data[i].sex; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tbody.appendChild(tr); } // 将thead和tbody添加到table中 table.appendChild(thead); table.appendChild(tbody); // 将table添加到DOM中 document.body.appendChild(table); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值