学了一段时间的JQUERY,正好项目要添加个小功能,于是自报奋勇来担认UI设计。本来想找个表格的插件,发现大多太笨重,我要的功能挺简单的,于是就想自己做一个得了,费话少说先上图片
功能很简单就是用AJAX动态修改一行里的一个字段,比如选中一行点击“修改单位”时,这一行的单位编号字段就最成可编辑的,右边出来个保存按钮,修改完后点保存就行。如果选中另一行,当前可编辑的字段都变成不可编辑的。
我的实现方法是:在需要编辑的字段位置放一个div和一个input来回切换。本来我是想用一个input就行了,改变其CSS和属性也能实现,可其中还有个select,怎么改变其css都无法去掉右边的三角,为了风格统一都用div切换了,上代码
HTML代码:
<tr>
<td><input name="radiobutton" type="radio" class="radiobutton" value="<bean:write name='card' property='sn'/>"></td>
<td><bean:write name='card' property='sn'/><input name="sn" type="hidden" id="sn" value="<bean:write name='card' property='sn'/>"></td>
<td><div id="hiddenuid"><bean:write name='card' property='u_id'/></div><input name="uid" type="text" maxlength="6" class="hiddenInput" id="uid" value="<bean:write name='card' property='u_id'/>"></td>
<td><script>document.write(showFlag("<bean:write name='card' property='flag'/>",false))</script>
</td>
<td><bean:write name='card' property='duration'/></td>
<td><div id="hiddendate"><bean:write name='card' property='expiredate'/></div><input name="date" type="text" class="hiddenInput" id="date" value="<bean:write name='card' property='expiredate'/>" size="10"></td>
<td><bean:write name='card' property='createdate'/></td>
<td><input name="button" type="button" class="saveInput" id="save" value="保存"></td>
</tr>
<td width="76"><input name="button5" type="button" id="modifyUID" value="修改单位 "></td>
<td width="91"><input name="button4" type="button" id="modifyFlag" value="是否激活"></td>
<td width="41"><input name="button3" type="button" id="modifyDate" value="续费"></td>
<td width="38"><input name="button2" type="button" id="delSN" value="删除"></td>
jquery代码
var index;
//初始化
$(function(){
index=$('input:checked').parent().parent(); //初始化index变量,刚开始的行
$('.listTable tr:gt(0):even').addClass('alt');//隔行变颜色
$('#modifyUID').click(function(){ //为"修改单位"邦定事件
if(isChecked()){
showInput('uid');
}
});
$('#modifyFlag').click(function(){ //为"是否激活"邦定事件
if(isChecked()){
showInput('flag');
}
});
$('#modifyDate').click(function(){ //为"续费"邦定事件
if(isChecked()){
$('input:checked').parent().parent().find('#date').calendar(); //邦定日历
showInput('date');
}
});
$('.saveInput').click(function(){ //为"保存"邦定事件
saveUpdate(this);
});
$('#delSN').click(function(){ //为"删除"邦定事件
if(isChecked()){
delSN();
}
});
$('.radiobutton').click(function(){ //当选择其它行时,隐藏当前行中的表单
cancelHiddenInput($(index).parent().parent());
index = this;
});
$('.radiobutton').each(function(){ //如果单选框没有值则为disabled
if($(this).val()==''){
$(this).attr('disabled','disabled');
}
});
$('input[@name=uid]').change(function(){
if(this.lenght>6){
return false;
}
});
});
//是否有一条记录选择
isChecked = function(){
if($('input:checked').length==0){
alert('请先选择一条记录!');
return false;
}
return true;
}
//隐藏表单
saveHidenInput=function(tr){
tr.find('.showInput').attr('class','hiddenInput');
tr.find('#save').css('visibility','hidden');
tr.find('#hiddenflag').html(showSelect(tr.find('#flag').val())).removeAttr('class');
tr.find('#hiddenuid').html(tr.find('#uid').val()).removeAttr('class');
tr.find('#hiddendate').html(tr.find('#date').val()).removeAttr('class');
}
cancelHiddenInput = function(tr){
tr.find('.showInput').attr('class','hiddenInput');
tr.find('#save').css('visibility','hidden');
tr.find('#uid').val(tr.find('#hiddenuid').html());
tr.find('#date').val(tr.find('#hiddendate').html());
tr.find('div[id*=hidden]').removeAttr('class');
}
//显示表单
showInput=function(id){
var tr = $('input:checked').parent().parent();
var showInput = tr.find('#'+id);
var hiddenInput = tr.find('#hidden'+id);
tr.find('#save').css('visibility','visible');
showInput.attr('class','showInput');
hiddenInput.attr('class','hiddenInput');
}
//保存方法
saveUpdate=function(id){
var tr = $(id).parent().parent();
var sn = tr.find('#sn').val();
var uid = tr.find('#uid').val();
var flag = tr.find('#flag').val();
var date = tr.find('#date').val();
var olddate = tr.find('#hiddendate').html();
if(uid.length>6){
alert('单位编号不能大于6位!');
return false;
}else if(date<olddate){
alert('续费后日期不能小于原来日期!');
return false;
}
$.ajax({
type:'post',
url:'adminCardDYKJMgrAction.do',
datatype:'json',
data:'action=modifyCard&u_id='+uid+'&flag='+flag+'&expiredate='+date+'&sn='+sn,
success:function(){
saveHidenInput(tr);
},
error:function(){
alert('系统出现错误,保存失败!');
}
});
}
//删除方法
delSN = function(){
if(confirm('是否要删除!')){
var tr = $('input:checked').parent().parent();
var sn = tr.find('#sn').val();
$.ajax({
type:'post',
url:'adminCardDYKJMgrAction.do',
datatype:'json',
data:'action=delCard&snid='+sn,
success:function(){
tr.remove();
},
error:function(){
alert('系统出现错误,删除失败!');
}
});
}
}
showSelect = function(flag){
var str;
if(flag=='1'){
str='已激活';
}else{
str='未激活';
}
return str;
}
function showFlag(id,y){
var str;
var str2;
if(id=='0'){
str=str+'<option value="">请选择</option>';
str=str+'<option value="0" selected="selected">未激活</option>';
str=str+'<option value="1">已激活</option>';
str2='<div id="hiddenflag">未激活</div>';
}else if(id=='1'){
str=str+'<option value="">请选择</option>';
str=str+'<option value="0">未激活</option>';
str=str+'<option value="1" selected="selected">已激活</option>';
str2='<div id="hiddenflag">已激活</div>';
}else{
str=str+'<option value="" selected="selected">请选择</option>';
str=str+'<option value="0">未激活</option>';
str=str+'<option value="1">已激活</option>';
str2='<div id="hiddenflag"></div>';
}
str=str+'</select>';
if(y==true){
return '<select name="flag" id="flag">'+str;
}else{
return str2+'<select name="flag" id="flag" class="hiddenInput">'+str;
}
}
总结:写的有些粗糙,不过功能都实现了,这个代码不能直接用,因为代码不全,而且后台java代码没有。只做学习用。
感觉jquery的查询功能太爽了,越来越喜戏它了
- 大小: 13.5 KB
- 大小: 4.9 KB
分享到:
相关推荐
这段代码中,`addRow`函数创建一个新的表格行,包含三个文本输入框和一个删除按钮。`removeRow`函数接收一个事件对象`e`,并查找与该事件相关的删除按钮,然后移除该按钮所在的行。`$("#addButton")`是添加按钮的ID...
jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个表格由`<table>`元素包含,其中包含`<tr>`(行)和`<td>`(单元格)。使用jQuery,...
在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...
总结来说,“jQuery表格编辑添加删除行插件”是一个强大的工具,它结合了jQuery的便利性和JSON的灵活性,使得在网页中构建可编辑的表格变得轻而易举。通过深入学习和应用这个插件,开发者可以提升项目中表格组件的...
综上所述,"jQuery表格内容修改删除代码"是一个实用的前端开发工具,它利用jQuery的灵活性和Bootstrap的美观性,实现了表格的动态编辑和删除功能,为网页的数据展示带来了更多的可能性。开发者可以根据自己的需求...
`$("tr").append("新单元格</td>")`会在每一行末尾添加新的单元格,而`$("tr:last").remove()`则会删除最后一个行。 4. **隐藏和显示表格**:要隐藏表格,可以使用`$("table").hide()`,反之,使用`$("table").show...
需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据源,并且可以新增空白行,直接...
总的来说,动态添加和删除表格行是前端开发中常见的功能,jQuery提供了简洁而强大的API来处理这类任务。通过理解并运用`add()`和`del()`函数,开发者可以轻松地实现这些功能,同时还能根据具体场景进行优化和扩展。
通过这种方式,我们就可以创建一个功能完善的动态表格,用户既可以方便地添加新行,也可以轻松删除不需要的行。这只是一个基础示例,实际应用中可以根据需求进行更复杂的功能扩展,比如数据验证、异步加载等。
在"jQuery表格编辑添加删除行代码"中,jQuery的主要作用是快速有效地操作DOM元素,使得用户界面的动态更新变得更加简单。 该代码的核心在于如何创建可编辑的表格。在`index.html`中,我们会看到一个基本的HTML表格...
本主题聚焦于一个特定的应用场景:使用jQuery和Bootstrap创建具有内容修改、删除和编辑功能的表格插件。 首先,jQuery是一个轻量级的JavaScript库,它使得JavaScript编程更加简单、高效。jQuery的核心特性包括DOM...
本文将深入探讨如何使用jQuery创建动态表格,这是一个常见的需求,特别是在数据展示和用户交互丰富的Web应用中。 首先,让我们理解动态表格的基本概念。动态表格指的是在网页加载后或用户操作时根据需要生成或更新...
在这个“jquery动态增加修改删除表格,上移下移功能”的项目中,开发者利用jQuery实现了对表格的动态操作,这在网页数据展示和管理中非常常见。 首先,我们来理解这个项目的标题:“jquery动态增加修改删除表格,上移...
对于"动态增删表格",我们可以创建一个基础表格结构,然后利用jQuery动态生成或移除表格行(tr)。例如,当用户点击添加按钮时,我们可以创建一个新的tr元素,包含预定义的列结构,然后用.append()将其插入到表格中...
删除表格行则需要监听一个删除按钮或链接,然后移除对应的`<tr>`元素: ```html <!-- 在每行末尾添加一个删除按钮 --> <td>Name1 <td>Age1 <td><button class="delete-btn">Delete</button></td> ``` ```...
本资源"jQuery+Bootstrap表格内容修改删除编辑插件.zip"提供了一个实用的解决方案,它将流行的前端框架jQuery与Bootstrap相结合,实现了表格内容的动态修改、删除和编辑功能。下面我们将详细探讨这个插件的核心知识...
在这个名为"jQuery表格内容修改删除代码.rar_beanu7y_jQuery表格内容修改删除代码_tightlydof"的压缩包中,重点是实现一个功能丰富的可编辑表格插件。这个插件允许用户直接在表格中进行内容修改和行的删除增加操作,...
在ASP.NET开发中,我们经常会遇到需要处理不规则表格的情况,这些表格可能具有不同数量的行、列或者具有动态变化的结构。在这种情况下,结合jQuery的强大学习库,我们可以有效地管理和操作这些复杂的表格数据。以下...
本文将深入探讨一个基于jQuery的表格控件,该控件实现了无刷新的添加、编辑、删除和统计功能,以VS2008为开发环境,利用Ajax技术,结合JSON数据格式,为用户提供流畅的交互体验。 一、jQuery与Ajax基础 jQuery简化...