javascript实现动态增加删除表格行(兼容IE/FF)_javascript技巧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动态增删表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com

var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;

objCell=objRow.insertCell(0);
objCell.innerHTML=" "; 

objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;

objCell=objRow.insertCell(2);
objCell.innerHTML=objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;

}

function removeLine(){

}

//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td><select name="select">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select></td>
<td><input name="basicinfo" type="text" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)"></td>
</tr>
<tr>
<td>其它信息</td>
<td> </td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

时间: 2024-09-19 22:58:18

javascript实现动态增加删除表格行(兼容IE/FF)_javascript技巧的相关文章

jquery动态增加删除表格行的小例子_jquery

复制代码 代码如下: <script src="jquery/jquery-1.3.1.js"></script><style type="text/css">body{background:#FFFFFF;}</style></head><body><script> $(function(){ var show_count = 20;   //要显示的条数 var count =

利用js动态添加删除table行的示例代码_javascript技巧

如下所示: 复制代码 代码如下: //动态添加行function addRow(){   var table = document.getElementById("tableID");   var newRow = table.insertRow(); //创建新行   var newCell1 = newRow.insertCell(); //创建新单元格   newCell.innerHTML = "": //单元格内的内容   newCell.setAttri

基于JavaScript实现动态添加删除表格的行_javascript技巧

又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t

动态添加删除表格行的js实现代码

 本篇文章主要是对动态添加删除表格行的js实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <html> <head> <script language="javascript">   //窗口表格增加一行   function addNewRow(){    var tabObj=document.getElementById("myTab");//获取添加数据的表格    var rowsNum

jquery动态增加删减表格行特效_jquery

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none"> <tbody> <tr> <td height="30"

asp.net2.0中如何动态增加删除表格,在增加表格的同时能增加下拉列表控件?在线等

问题描述 asp.net2.0中如何动态增加删除表格,在增加表格的同时,表格中增加下拉列表控件>该如何实施?谢谢! 解决方案 解决方案二:昨晚天刚用JS写一个,给个参考吧-----------<scripttype="text/javascript">//印刷机组信息varmachineStr='<%=machineStr%>';//可开计划的产品编号和名称信息varproductionStr='<%=productionStr%>';//将印

js+dom增加删除表格行代码

js+dom增加删除表格行代码 <table id="tbl" width="300" name="tbl" border="1">   <tr>     <td width="160">content</td>     <td>name</td>     <td><input type="button&qu

JQuery 表格操作(交替显示、拖动表格行、选择行等)_javascript技巧

JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!--     $(function(){         //交替显示行         $('#alternation').click(function(){                             $('tbody > tr:odd', $('#example')).toggleClass('alternatio

JS实现的表格行上下移动操作示例_javascript技巧

本文实例讲述了JS实现表格行上下移动操作的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he