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

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

赞 (0)

相关推荐

  • js操作table元素实现表格行列新增、删除技巧总结

    本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

  • 用Js实现的动态增加表格示例自己写的

    复制代码 代码如下: function addEvent (o,c,h){ if(o.attachEvent){ o.attachEvent('on'+c,h); }else{ o.addEventListener(c,h,false); } return true;} var selectRow;//页面级js变量,用来存被选中的行,好在弹出窗口中对该行赋值 function addnode() { var table=document.getElementById("Dy_table&quo

  • JS动态增删表格行的方法

    本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行

  • 基于JavaScript实现动态创建表格和增加表格行数

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • JavaScript获取表格（table）当前行的值、删除行、增加行

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Js获取 table当前行的值</title> <script language=javascript> var selectedTr = null; function c1(obj) { obj.style.back

  • JavaScript 自动在表格前面增加序号

    JavaScript 自动为表格增加序号 .index_tab{width:100%;border-collapse:collapse;border:1px solid #005892;margin:8px 0;} .index_tab td{line-height:35px;border:1px solid #005892;padding-left:4px;} tr.tr_top td{line-height:32px;border:none;background-color:#005892;

  • javascript实现表格增删改操作实例详解

    本文实例讲述了javascript实现表格增删改操作的方法.分享给大家供大家参考.具体实现方法如下: <!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"&

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

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

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

  • 基于JavaScript实现动态添加删除表格的行

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

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

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

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

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

    复制代码 代码如下: <html><head><script language="javascript">  //窗口表格增加一行  function addNewRow(){   var tabObj=document.getElementById("myTab");//获取添加数据的表格   var rowsNum = tabObj.rows.length;  //获取当前行数   var colsNum=tabObj.row

  • 原生JS和JQuery动态添加、删除表格行的方法

    本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

  • JQuery动态添加和删除表格行的方法

    本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi

  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

  • 动态增加/删除文件域

    LEDADBBS网友提供的一个动态增加/删除文件域的代码,还不错,收藏一下. function additem(id){ var row,cell,str; row = eval("document.all["+'"'+id+'"'+"]").insertRow(); if(row != null ){ cell = row.insertCell(); str="" cell.innerHTML=str; } } functi

  • JavaScript通过事件代理高亮显示表格行的方法

    本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highlight Rows</title> <style type

随机推荐