easyui添加删除表格任意行(2)

easyui添加删除表格任意行(2)

1、easyui添加删除表格思路：
   1)、引入js, esayui.min.js, easyui.css
   2)、设置表格ID和表格要添加tr的class
   3)、根据表格的ID来追加一行tr到该表格后
   4)、根据tr的class来判断已经添加的记录数
   5)、根据tr的this得到这一行的节点,从table中删除这一行的节点

2、实现的效果

3、实现的html代码(直接复制可用)

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>添加删除表格(2)</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><!-- 引入easyui --><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"><script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script></head><body><form id="form_id" enctype="multipart/form-data" method="post"><div><table cellspacing="20px"><tbody><tr><td  width="96px">模板标题：</td><td><input class="easyui-textbox" name="addacount_name" data-options="prompt:'请输入模板标题',required:true" style="width:285px"/><!-- <span class="red">提示：文件不能大于1M</span> --></td></tr><tr><td>所属分类：</td><td><select class="easyui-combobox"  name="addacount_style" data-options="required:true,panelHeight:'auto',editable:false,width:'100px'"><option value="1">新品</option><option value="2">限时</option></select></td></tr><!-- <tr  id="account_add_file"><td>选择文件：</td><td><input class="easyui-filebox" name="addacount_applyimage" id="account_add_applyimage"  data-options="prompt:'请上传txt文件',required:true" style="width:285px"/><span class="red">提示：文件不能大于1M</span> </td></tr> --><tr><td width="96px">添加音乐</td><td><table id="videoadmin_tempAdd_music_table" cellspacing='1'><thead><tr><td width="150px">主标题</td><td width="150px">副标题</td><td width="200px">音乐</td><td width="90px">影片速度</td><!-- <td>视频时长(s)</td> --><!-- <td colspan='3' style='text-align:center'> --><td><a href="javascript:void(0)" title="添加内容" onclick="addTrCommon('music','videoadmin_addTemp_music_tr','videoadmin_tempAdd_music_table',-1,3)" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a></td></tr></thead><tbody><tr class="videoadmin_addTemp_music_tr"><td><input class="easyui-textbox" name='musicTitleList[]' data-options="width:'150px',required:true" value=""/></td><td><input class="easyui-textbox" name='musicSubTitleList[]' data-options="width:'150px',required:true" value=""/></td><td><input class="easyui-filebox" name="musicFileIdList[]" id="account_add_applyimage"  data-options="prompt:'请上传音乐',required:true,width:'200px'"/></td><td><select class="easyui-combobox"  name="musicSpeedList[]" data-options="required:true,panelHeight:'auto',editable:false,width:'50px'"><option value="3">3</option><option value="1">1</option><option value="2">2</option><option value="2">4</option><option value="2">5</option></select></td><!-- <td><input class="easyui-numberspinner" type="text" name="selfmediaCashcheck[morethan]" data-options="prompt:'大于等于',min:1,editable:true,width:'90px',">1</input></td> --><td><a href="javascript:void(0)" title="删除内容" onclick="reduceTrCommon(this,'videoadmin_addTemp_music_tr','videoadmin_tempAdd_music_table')" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a></td></tr></tbody></table></td></tr><!-- 添加图片tr操作 --><tr><td width="96px">添加图片</td><td><table id="videoadmin_tempAdd_pic_table" cellspacing='1'><thead><tr><td width="150px">主标题</td><td width="150px">副标题</td><td width="200px">图片</td><td width="90px">时长(秒)</td><td width="90px">排序(升序)</td><td colspan='3' style='text-align:center'><a href="javascript:void(0)" title="添加内容" onclick="addTrCommon('pic','videoadmin_addTemp_pic_tr','videoadmin_tempAdd_pic_table', 1,9)" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a></td></tr></thead><tbody><tr class="videoadmin_addTemp_pic_tr"><td><input class="easyui-textbox" name='picTitleList[]' data-options="width:'150px',required:true" value=""/></td><td><input class="easyui-textbox" name='picSubTitleList[]' data-options="width:'150px',required:true" value=""/></td><td><input class="easyui-filebox" name="picFileIdList[]" data-options="prompt:'请上传图片',required:true,width:'200px'"/></td><td><input class="easyui-numberspinner" type="text" name="picDurationList[]" data-options="prompt:'时长(秒)',min:1,editable:true,width:'90px',value:1"/></td><td><input class="easyui-numberspinner" type="text" name="picSortList[]" data-options="prompt:'排序(升序)',min:1,editable:true,width:'90px',value:1"/></td><td><a href="javascript:void(0)" title="删除内容" onclick="reduceTrCommon(this,'videoadmin_addTemp_pic_tr','videoadmin_tempAdd_pic_table',1)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a></td></tr></tbody></table></td></tr><!-- 添加文字操作 --><tr><td width="96px">添加文字</td><td><table id="videoadmin_tempAdd_word_table" cellspacing='1'><thead><tr><td width="150px">主标题</td><td width="150px">副标题</td><td width="90px">时长(秒)</td><td width="90px">排序(升序)</td><!-- 文字内容 --><!-- <td width="90px"></td> --><td colspan='3' style='text-align:center'><a href="javascript:void(0)" title="添加内容" onclick="addTrCommon('word','videoadmin_addTemp_word_tr','videoadmin_tempAdd_word_table',1,4)" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a></td></tr></thead><tbody><tr class="videoadmin_addTemp_word_tr"><td><input class="easyui-textbox" name='wordTitleList[]' data-options="width:'150px',required:true" value=""/></td><td><input class="easyui-textbox" name='wordSubTitleList[]' data-options="width:'150px',required:true" value=""/></td><!-- <td><input class="easyui-filebox" name="wordFileIdList[]" data-options="prompt:'请上传图片',required:true,width:'200px'"/></td> --><td><input class="easyui-numberspinner" type="text" name="wordDurationList[]" data-options="prompt:'时长(秒)',min:1,editable:true,width:'90px',value:1"/></td><td><input class="easyui-numberspinner" type="text" name="wordSortList[]" data-options="prompt:'排序(升序)',min:1,editable:true,width:'90px',value:1"/></td><td><a href="javascript:void(0)" title="删除内容" onclick="reduceTrCommon(this,'videoadmin_addTemp_word_tr','videoadmin_tempAdd_word_table',1)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a></td></tr></tbody></table></td></tr></tbody></table></div></form><!-- 提交键 --><div style="margin-left:20px"><a href="javascript:void(0)" onclick="getFormData()" class="easyui-linkbutton" iconCls="icon-filter" plain="true">获取表单值</a></div></body>
</html>
<script>/*** @todo 添加一行通用方法* @param type 类型 music,pic,word 音乐/图片/文字* @param table_tr_class 一行tr的class* @param table_id 表格的ID* @param max_length 最少添加的行数* @param max_length 最多添加的行数*/function addTrCommon(type, table_tr_class, table_id, min_length, max_length){var rendeClass = [];  //需要渲染的class用数组保存var length = $("."+table_tr_class).length;if(length == max_length){alert('最多添加 [ '+ max_length +' ] 条记录！');return;}//tr拼接var one_tr_add = '<tr class="'+table_tr_class+'">'+'<td><input class="easyui-textbox vata_'+type+'_title" data-options="width:\'150px\',required:true" name="'+type+'TitleList[]" value=""/></td>'+'<td><input class="easyui-textbox vata_'+type+'_sub_title" data-options="width:\'150px\',required:true" name="'+type+'SubTitleList[]" value=""/></td>';rendeClass = ['vata_'+type+'_title', 'vata_'+type+'_sub_title'];if( type=='music' || type == 'pic' ){ //音乐和图片都有文件上传rendeClass.push('vata_'+type+'_file_id');one_tr_add += '<td><input class="easyui-filebox vata_'+ type +'_file_id" name="'+type+'FileIdList[]" data-options="prompt:\'请上传音乐\',required:true,width:\'200px\'"/></td>';}if( type == 'music' ){rendeClass.push('vata_'+type+'_speed');one_tr_add += '<td><select class="easyui-combobox vata_'+type+'_speed"  name="'+type+'SpeedList[]" data-options="required:true,panelHeight:\'auto\',editable:false,width:\'50px\'">';for(var i=1;i<6;i++){one_tr_add += '<option value="'+i+'">'+i+'</option>';}}if( type=='pic' || type=='word' ){ //图片和文字都有时长和排序rendeClass.push('vata_'+type+'_duration', 'vata_'+type+'_sort');one_tr_add += '<td><input class="easyui-numberspinner vata_'+type+'_duration" type="text" name="'+type+'DurationList[]" data-options="prompt:\'时长(秒)\',min:1,editable:true,width:\'90px\',value:1"/></td>'+'<td><input class="easyui-numberspinner vata_'+type+'_sort" type="text" name="'+type+'SortList[]" data-options="prompt:\'排序(升序)\',min:1,editable:true,width:\'90px\',value:1"/></td>';}//三个都有减号rendeClass.push( 'vata_'+type+'_del');one_tr_add +=      '<td><a href="javascript:void(0)" class="easyui-linkbutton vata_'+type+'_del" title="删除内容" onclick="reduceTrCommon(this,\''+table_tr_class+'\',\''+table_id+'\','+min_length+')" iconCls="icon-remove" plain="true"></a></td>'+'</tr>';//追加至表格后$('#'+table_id).append(one_tr_add);//渲染easyui最新一行输入框for(x=0;x<rendeClass.length;x++){$.parser.parse($('.'+rendeClass[x]).parent());}}/***@todo 删除表格当前行*@param r 当前对象*@param class_tr 当前tr的class值*@param table_id 当前表格的ID*@param min_length 最少添加的记录数*/function reduceTrCommon(r, class_tr, table_id, min_length  ){min_length = min_length || -1; if(min_length != -1){var length = $("."+class_tr).length;if(length == 1){alert('请至少写入['+min_length+']条记录！');return;} }var i=r.parentNode.parentNode.rowIndex;document.getElementById( table_id ).deleteRow(i);}//获取表单数据function getFormData(){//提交表单操作var isValid = $('#form_id').form('validate');if (!isValid) {return false;}//MaskUtil.mask();var formData = new FormData($( "#form_id" )[0]);console.log(formData);alert(formData);$.ajax({url: '/*/*/*',data: formData,dataType: 'json',type: 'post',async: false,  cache: false,  contentType: false,  processData: false,success: function(result) {if (result.status == 'success') {//成功后关闭操作框并重新加载表格//dialog('close');//加载的是主[默认]页面大表格的id//$('#easyuiTable_id').datagrid('reload');   //重新加载表格[主列表表格]}//MaskUtil.unmask();alert(result.message);}});}
</script>

easyui添加删除表格任意行(2)相关推荐

jquery添加删除表格行
jquery向表格添加一行,或者删除一行数据表格最后一行有一个添加按纽,具体如下当点击添加按纽的时候,在这个表格的倒数第二行添加一行,因为倒数第一行是添加按钮的位置.代码如下页面的table代码 ...
asp.net添加删除表格_如何用openpyxl自动化编写Excel电子表格
有很多不同的东西你可以写到电子表格,从简单的文本或数字值到复杂的公式,图表,甚至图像. 创建一个简单的电子表格之前,大家看到了一个非常快速的例子,就是如何将 "Hello world!&q ...
asp.net添加删除表格_你问我答|135编辑器使用之超链接和表格问题
嘿,胖友们大家好呀,我是三儿. 万众期待的『你问我答』栏目又回来了!之前我们有出过两期内容,解决了胖友们在日常工作中使用135编辑器常见到的一些问题. >>>>>点我查看 ...
JS小功能(操作Table--动态添加删除表格及数据)实现代码
效果: [在新窗口打开图片] 代码: 代码如下: <head runat="server"> <title></title> < ...
power BI中删除表格重复行步骤
由于种种原因导入power BI的数据存在重复行,需要删除,步骤如下: (1)"开始"-"编辑查询":此时会新打开一个窗口 (2)在新窗口中"选中目标 ...
用js实现动态添加删除表格数据
代码如下: <!DOCTYPE HTML> <html> <head> <meta charset = "UTF-8"> <t ...
EasyUI 添加一行的时候行号出现负数的解决方案
原因是:在jquery_easyui.js 看方法 insertRow : function(_736, _737, row) 以下小代码算行号, if (opts.pagination) { _73 ...
【Java学习笔记】55：JDBC-MySQL基本使用,游标控制,CONCUR_UPDATABLE,更新/添加/删除
配置了这么久终于可以学习JDBC了,在这之前,给刚刚的表多插入一些表项: mysql> USE newDB; Database changed mysql> INSERT INTO New ...
动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证
PS: 游戏公司后台开发,工作模式:996. 于是写博客这事也荒废了.... 想想还是写一点吧. 呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的. 我建两个相似的表是为了,给后台使用 ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...

easyui添加删除表格任意行(2)

easyui添加删除表格任意行(2)相关推荐

最新文章

热门文章