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

转载 2015年07月27日 22:32:21

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

2014-09-08 11:19 | 11504人阅读 | 来源
代码如下:

<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> 

使用js实现表格增加与删除

new document window.onload = function(){ var mytr=document.getElem...
  • qq_35655129
  • qq_35655129
  • 2016年07月25日 10:41
  • 4024

JS实现动态表格的新增,修改,删除操作

1.  首先在页面中配置好一个表格框架 新增参数: 参数列表: 参数名...
  • linwei_1029
  • linwei_1029
  • 2013年03月14日 20:05
  • 13918

js实现动态删除表格行和列

记录了动态添加表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,并且第几列的内容都可以添加上,先来回顾下它的实现的关键点: 1、var row=table.insertRow(...
  • u012422446
  • u012422446
  • 2015年08月18日 11:10
  • 5118

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

  • 2013年12月05日 16:30
  • 2KB
  • 下载

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

  • 2010年06月22日 11:21
  • 9KB
  • 下载

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

js动态操作表格  function init(){        _table=document.getElementById("table"); _table.border="1px";...
  • hsany330
  • hsany330
  • 2012年10月03日 18:46
  • 624

js操作html的table,包括添加行,添加列,删除行,删除列,合并单元格(未实现,可参考代码)

记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并 按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 。当时我从学校出来,js知识只是知道一些,根...
  • middlekingt
  • middlekingt
  • 2012年09月14日 10:38
  • 2780

【转】js操作html的table,包括添加行,添加列,删除行,删除列,合并单元格(未实现)

转自:http://www.cnblogs.com/greatverve/archive/2009/07/02/1515192.html js操作表格 /*生成表格,采用appendChi...
  • shampire
  • shampire
  • 2014年04月01日 10:46
  • 985

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

  • 2016年03月30日 13:40
  • 1KB
  • 下载

javascript动态创建表格:新增、删除行和列

利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。 1、...
  • tearsmo
  • tearsmo
  • 2011年07月05日 16:03
  • 570
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript动态操作表格实例(添加,删除行,列及单元格)
举报原因:
原因补充:

(最多只允许输入30个字)