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

又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。

1.jsp

<table id="viewTabs">
<thead>
<tr>
<th>产品名称</th>
<th>编号</th>
<th>数量</th>
<th>重量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="productName" type="text"></td>
<td><input name="productNumber" type="text"></td>
<td><input name="quantity" type="text"></td>
<td><input name="weight" type="text"></td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" onclick="addTable();" style="margin-left: 750px;">添加行</button>

2.js

//添加行
function addTable(){
var tab=document.getElementById("viewTabs"); //获得表格
var colsNum=tab.rows.item(0).cells.length; //表格的列数
//表格当前的行数
var num=document.getElementById("viewTabs").rows.length;
var rownum=num;
tab.insertRow(rownum);
for(var i=0;i<4; i++)
{
tab.rows[rownum].insertCell(i);//插入列
if(i==0){
tab.rows[rownum].cells[i].innerHTML=
'<input name="productName" type="text"/>';
}else if(i==1){
tab.rows[rownum].cells[i].innerHTML='<input name="productNumber" type="text"/>';
}else if(i==2){
tab.rows[rownum].cells[i].innerHTML='<input name="quantity" type="text"/>';
}else{
tab.rows[rownum].cells[i].innerHTML='<input name="weight" type="text"/>';
}
}
tab.rows[rownum].insertCell(i);
tab.rows[rownum].cells[i].innerHTML='<a href="#" onclick="delRow(this)">删除行</a>';
}
//删除行
function delRow(obj)
{
var Row=obj.parentNode;
var Row=obj.parentNode; //tr
while(Row.tagName.toLowerCase()!="tr")
{
Row=Row.parentNode;
}
Row.parentNode.removeChild(Row); //删除行
}

以上所述是小编给大家分享的JavaScript实现动态添加删除表格的行，希望对大家有所帮助。

赞 (0)

相关推荐

  • js实现添加删除表格（两种方法）

    js实现添加删除表格（两种方法）

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin:0 auto; background:yellow; border:4px double #808080; width:600px; text-alig

  • js简单的表格添加行和删除行操作示例

    复制代码 代码如下: <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(fu

  • JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    JS实现的表格操作类详解(添加，删除，排序，上移，下移)

    本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin

  • JS实现动态表格的添加，修改，删除功能(推荐)

    1. 首先在页面中配置好一个表格框架 <tr> <td>新增参数:</td> <td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <td class="

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

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

  • js实现动态添加、删除行、onkeyup表格求和示例

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "

  • 原生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"

  • JS小功能(操作Table--动态添加删除表格及数据)实现代码

    JS小功能(操作Table--动态添加删除表格及数据)实现代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        tr        {            height: 30px;        }    </style>    <script type="text/javascript">   

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

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI

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

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

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

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

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

  • javascript动态添加删除tabs标签的方法

    本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?

  • JavaScript实现动态添加、移除元素或属性的方法分析

    JavaScript实现动态添加、移除元素或属性的方法分析

    本文实例讲述了JavaScript实现动态添加.移除元素或属性的方法.分享给大家供大家参考,具体如下: JavaScript 动态添加.移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点. insertBefore(newnode, existingnode) 在已有子节点之前插入新的子节点. removeChild(node) 删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null. innerHTML 属性设置

  • JQuery实现动态添加删除评论的方法

    本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!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实现动态添加，删除行的方法实例详解

    本文实例讲述了JavaScript实现动态添加,删除行的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>增加Table行</title> </head> <script language="javascript

  • 基于JavaScript代码实现自动生成表格

    废话不多说,直接给大家贴js代码了,具体代码如下所示: //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"

  • js实现添加删除表格操作

    js实现添加删除表格操作

    本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1.点击添加按钮 往table中添加一行  将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2.点击删除按钮 获取表格体中被选中的行, 删除整个tr, 将全选前面的复选框变成false 获取的是第一个td中的checkbox的状态 checked为true 2层父子 3 .点击全选按钮前面的复选框 如果被选中 下面的每一个复选框都被选中 如果不被选中 下面的每一个复选框都不被选中 4.点

随机推荐