这是最近在公司项目中使用的，一个对表格行进行动态增加和删除的javascript的封闭，公司的表格比较复杂，此处仅做了一个简单实用例子。
以下是JSP代码：
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>HelloWorld</title>
<style type="text/css">
body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; background: #E6EAE9; }
a {color: #c75f3e;}
#mytable {width:700px;padding:0;margin:0;}
caption {padding: 0 0 5px 0; width: 700px; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: right;}
th { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA url(images/bg_header.jpg) no-repeat; }
th.nobg { border-top:0; border-left: 0; border-right: 1px solid #C1DAD7; background: none; }
td {border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; font-size:11px; padding: 6px 6px 6px 12px; color: #4f6b72; }
td.alt {background: #F5FAFA; color: #797268;}
th.spec {border-left: 1px solid #C1DAD7; border-top: 0; background: #fff url(images/bullet1.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
th.specalt {border-left: 1px solid #C1DAD7; border-top: 0; background: #f5fafa url(images/bullet2.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #797268;}
.button{border: #93bee2 1px solid; font-family:"tahoma","宋体";font-size:9pt; color:#006699; background-color:#e8f4ff; cursor: hand; font-style: normal ;width:60px;height:25px;padding-top:1px;}
</style>
<script type="text/javascript">
var Customer = {
container:null,
datalist:[],
setContainer:function(container){
this.container = document.getElementById(container);
},
setDatalist:function(data){
if(data){
this.datalist=data;
}else{
this.datalist=[];
}
},
addNew:function(){
var obj={cusid:'',cusname:'',username:''};
this.datalist.push(obj);
this.refresh();
},
delRow:function(index){
if(confirm("就否确定要删除该记录？")){
this.datalist.splice(index,1);
this.refresh();
}
},
refresh:function(){
var len = this.datalist.length;
var htm="<table border='0' align='center' cellspacing='1' cellpadding='0' width='700px' id='mytable' >";
htm+="<caption>动态表格操作JS封装</caption>";
htm+="<tr>"
htm+="<th scope='col' abbr='序号'>序号</th>";
htm+="<th scope='col' abbr='产品ID'>产品ID</th>";
htm+="<th scope='col' abbr='产品名称'>产品名称</th>";
htm+="<th scope='col' abbr='使用人'>使用人</th>";
htm+="<th scope='col' abbr='操作'>操作</th>";
htm+="</tr><tbody>"
for(var i=0;i<len;i++){
objX = this.datalist[i];
var tdcss = "class='alt'";
if(i==0||i%2==0){
htm += "<tr><th scope='row' abbr='"+(i+1)+"' class='spec'>"+(i+1)+"</th> ";
tdcss="";
}else{
htm += "<tr> <th scope='row' abbr='"+(i+1)+"' class='specalt'>"+(i+1)+"</th>";
tdcss = "class='alt'";
}
htm += "<td "+tdcss+"><input type='text' name='cusname"+i+"' id='cusname"+i+"' size='20' value='"+objX.cusname+"' onblur='Customer.insertdata(this,\"cusname\","+i+")'></td>";
htm += "<td "+tdcss+"><input type='text' name='cusid"+i+"' id='cusid"+i+"' size='20' value='"+objX.cusid+"' onblur='Customer.insertdata(this,\"cusid\","+i+")'></td>";
htm += "<td "+tdcss+"><input type='text' name='username"+i+"' id='username"+i+"' size='20' value='"+objX.username+"' onblur='Customer.insertdata(this,\"username\","+i+")'></td>";
if(i==0){
htm += "<td "+tdcss+"><input type='button' value='添加' onclick='javascript:Customer.addNew();' class='button'></td>";
}else{
htm += "<td "+tdcss+"><input type='button' value='删除' onclick='javascript:Customer.delRow("+i+");' class='button'></td>";
}
htm += "</tr>";
}
htm += "</tbody></table>";
this.container.innerHTML=htm;
},
insertdata:function(obj,flag,index){
var objX = this.datalist[index];
if(flag=="cusid"){
objX.cusid = obj.value;
}
if(flag=="cusname"){
objX.cusname = obj.value;
}
if(flag=="username"){
objX.username = obj.value;
}
}
};
window.onload=function(){
Customer.setContainer("mytest");
Customer.addNew();
};
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
效果如图所示：
相关推荐
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
本文将深入探讨如何使用 jQuery 动态添加和删除表格行，以实现高效且用户友好的数据展示。 首先，理解 HTML 表格的基本结构至关重要。`<table>` 元素用于创建表格，`<tr>` 代表表格行，`<td>` 或 `<th>` 分别表示...
"多表格固定列，实现动态增删改"这个主题涉及到的是如何使用前端技术来实现对表格数据的高效操作，特别是固定列、动态添加、删除和修改功能。下面我们将深入探讨这一话题。 首先，固定列在网页表格中非常实用，因为...
本示例探讨了如何使用jQuery实现表格动态增加行的功能，并且在新行上添加事件，以提升用户体验和性能。 首先，我们了解目标：创建一个表格，允许用户在表格末尾动态增加空白行，而不是一次性添加大量行，从而避免...
在JavaScript编程中，实现动态添加和删除表格行是一项常见的需求，尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行，并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...
在Web开发中，动态地增加或删除表格行是一项常见的需求。这种功能不仅能够提高用户体验，还能根据用户的需求灵活调整数据展示方式。jQuery作为一种轻量级的JavaScript库，提供了简单易用的方法来操作DOM元素，非常...
然而，在实际项目中，为了提高开发效率和代码复用性，开发者往往需要对原生的 Element UI 表格进行二次封装，以实现更灵活的配置和功能。"element-ui表格二次封装.zip" 就是这样一个针对 Element UI 表格组件的定制...
本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效，这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先，jQuery提供了方便的DOM操作方法，如`append()`和`remove()`，可以...
Vueaxios项目是一个基于Vue.js、JavaScript和HTML5的前端应用，它实现了表格的增删查功能，使用了axios库来处理HTTP请求。在本项目中，axios作为一个强大的库，负责与后端API进行数据交互，实现数据的动态加载、保存...
以下是对这个表格组件封装过程的详细阐述： 1. **Vue3基础知识**：Vue3是Vue.js的最新版本，引入了许多新特性，如Composition API、Suspense、Teleport等。在这个项目中，我们将主要利用Composition API来组织和...
其次，行的增加和删除功能涉及到对表格数据的动态管理。在JavaScript中，可以创建新的表格行`<tr>`元素，并向其中添加数据，然后将其插入到表格的适当位置。删除行则需要找到目标行并移除它。这通常通过`insertRow`...
在JavaScript（JS）中，对HTML表格进行操作是常见的需求，包括添加新的行或删除现有的行。这在网页动态交互中非常有用，比如用户输入数据的管理或者展示数据的增删改查功能。以下我们将详细讲解如何使用JavaScript来...
标题 "表格添加删除行，依赖于jquery" 涉及的核心技术是JavaScript库jQuery，它在Web开发中广泛用于简化DOM操作、事件处理和动画效果。这篇博客文章可能讲解了如何利用jQuery在HTML表格中动态地添加和删除行，这对于...
实战封装vue3中表格的上、下移动，序号随之变化的hooks组件
总的来说，通过Vue.js和Element UI，你可以快速地构建出具有增删查改功能的表格，以及方便的详情页跳转。这使得开发者可以专注于业务逻辑，而不是底层的DOM操作，从而提高了开发效率和代码质量。在实际项目中，还...
3. **插入和删除表格元素**：jQuery提供了方便的方法来动态地插入或删除表格元素。`$("tr").append("新单元格</td>")`会在每一行末尾添加新的单元格，而`$("tr:last").remove()`则会删除最后一个行。 4. **隐藏和...
本文所介绍的JavaScript封装自动创建表格的实现代码，是一套用于动态生成HTML表格，并允许用户进行基本交互如添加、删除行以及编辑单元格的脚本。这种实现可以广泛应用于需要动态数据显示和管理的Web应用程序中。 #...
以本例中的表格插件为例，它可能包含了对表格行的增删改查的完整逻辑，提供了一套简单的API供用户调用，如`editRow()`、`addRow()`和`deleteRow()`。 在实际应用中，此类插件通常会结合CSS特效，以提升用户体验。...
通过jQuery，我们可以动态地将表格的每一行拆分为多栏，使得用户可以在有限的屏幕空间内查看更多的信息，无需滚动或缩放。 这个“表格分栏的jQuery封装”可能包含以下核心知识点： 1. **jQuery选择器**：jQuery...
这些工具类通常会封装对 EasyUI 表格的初始化、数据加载、事件绑定等操作，使得代码更加模块化，易于维护。 首先，我们来了解一下 EasyUI 表格的基本使用方法。EasyUI 的表格组件通过 `datagrid` 定义，可以通过...