<script language="javascript">
function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
}
return(null);
}
function add_Row(the_table) {
var the_row,the_cell;
var cur_rows=the_table.rows.length;
the_row=cur_rows==null?-1:(cur_rows);
var i=the_row-1;
var newrow=the_table.insertRow(i);//得到插入位置
the_cell=newrow.insertCell(0);
the_cell.innerHTML="<center >"+i;
the_cell=newrow.insertCell(1);
the_cell.innerHTML="<center ><input name=A"+i+" type=text size=30>";
the_cell=newrow.insertCell(2);
the_cell.innerHTML="<center ><INPUT type=button value=删除 onclick=del_row(myTable)>";
//alert(the_table.rows.length);
document.getElementById("cname").value=myTable.rows.length;
}
function del_row(the_table){
var the_cell;
the_cell=get_Element(event.srcElement,"td");
var index=the_cell.parentElement.rowIndex;
if(the_cell==null) return;
if(the_table.rows.length==1) return;
the_table.deleteRow(index);
var cell1='';
var cell2='';
document.getElementById("cname").value=document.getElementById("cname").value-1;
for(var i=1;i<document.getElementById('myTable').rows.length-2;i++)
{
try
{
cell1=document.getElementById('myTable').rows[i].cells[0];
cell2=document.getElementById('myTable').rows[i+1].cells[0];
cell22=document.getElementById('myTable').rows[i+1].cells[1];
if(parseInt(cell2.innerText)!=(parseInt(cell1.innerText)+1))
{
s=cell1.innerText.replace("","");
cell2.innerText=(parseInt(s-0)+1);
cell2.style.textAlign='center';
cell22.innerHTML="<center ><input name=A"+(i+1)+" type=text size=30>";
//alert(cell22.innerHTML);
}
}
catch(e)
{
alert(e.discription);
}
}
}
</script>
<form name="form1" method="post" >
<table width="60%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#BBB3AA" id="myTable" >
<tr class="TdContent">
<td bgcolor="#FFFFFF" ><div align="center">收件人</div></td>
<td bgcolor="#FFFFFF" ><div align="center">接收人
<input type="hidden" name="cname" id="cname">
</div></td>
<td bgcolor="#FFFFFF" ><div align="center">操作</div></td>
</tr>
<tr class="TdContent">
<td bgcolor="#FFFFFF"><div align="center">1</div></td>
<td align="center" bgcolor="#FFFFFF"><input name="A1" type="text" id="A1" size="30" >
</td>
<td bgcolor="#FFFFFF"><div align="center">
<input name="button" type="button" class="ButtonStyle" onClick="add_Row(myTable)" value="添加">
</div></td>
</tr>
<tr class="TdContent">
<td colspan="3" align="center" bgcolor="#FFFFFF"> </td>
</tr>
</table>
</form>
分享到:
相关推荐
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
NULL 博文链接:https://long316.iteye.com/blog/1393886
用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能,接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行,...
静态实现javascript,实现表格的增加和删除等功能,值得初学者学习
本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要填充的数据,一般是从数据库取数据,也...
主要介绍了JavaScript实现动态添加,删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
在一些系统使用中,我们常会遇到需要添加或删除行的要求,本例可以快速简洁地实现这功能(里面的返回需改成javascript:history.go(-1))
用JavaScript制作的动态表格,有添加、删除、全选、全不选,有对动态新增的域校验问题,有对新增的域设置readonly问题,还有对新增域中的span进行隐藏问题都有解决,还有对动态表格的讲解PPT一份。
JS自动添加,删除表格总结,及window窗体居中。内含源代码!!!!
使用javascript实现table动态增加删除行列。
js,javascript
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。