easyui添加删除表格任意行

1、效果图

2、文件目录结构

3、add.html代码

<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>添加删除表格</title>
       <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
       
       <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.1/themes/default/easyui.css">
       <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.1/themes/icon.css">
       <script src="../jquery-easyui-1.5.5.1/jquery.easyui.min.js"></script>
   </head>
   <body>
       <div style="margin-top:20px;margin-left:10px">
           <form id="table_form" enctype="multipart/form-data" method="post">
               <table id="table_id">
                   <thead>
                       <tr>
                           <td>姓名</td>
                           <td>爱好</td>
                           <td colspan='3' style='text-align:center'>
                               <a href="javascript:void(0)" title="添加内容" οnclick="add()" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
                           </td>
                       </tr>
                   </thead>
                   <tbody>
                       <tr class="table_every_tr">
                           <td>
                               <input class="easyui-textbox input_addname" name='namelist[]' data-options="width:'150px',required:true,prompt:'请输入姓名',missingMessage:'不能为空'" value=""/>
                           </td>
                           <td>
                               <input class="easyui-textbox input_pwd" name='pwdlist[]' data-options="width:'150px',required:true,prompt:'请输入爱好',missingMessage:'不能为空'" value=""/>
                           </td>
                           <td>
                               <a href="javascript:void(0)" title="删除内容" οnclick="deltete(this)" class="easyui-linkbutton selfmedia_helpoperaddaccount_del" iconCls="icon-remove" plain="true"></a>
                           </td>
                       </tr>
                   </tbody>
               </table>

               <div style="margin-top:10px;margin-left:5px;">
                   
                   <a class="easyui-linkbutton" style="width:120px" οnclick="getFormData()">确认</a>
               </div>
           </div>
       </form>
   </body>
</html>
<script>
var minRow = 1;   //设置表格最大行
var maxRow = 5;   //设置表格最小行

//给表格添加一行
function add(){
   var checkRow = checkTableRow( maxRow, 'table_every_tr' );   //校验行数
   if( !checkRow ){
       $.messager.alert('温馨提示', '最多添加 [ '+ maxRow +' ] 条信息！', 'info');
       return;
   }

var table_tr_add = '<tr class="table_every_tr">'+
               '<td><input class="easyui-textbox input_addname" data-options="width:\'150px\',required:true,prompt:\'请输入姓名\',missingMessage:\'不能为空\'" name="namelist[]" value=""/></td>'+
               '<td><input class="easyui-textbox input_pwd" data-options="width:\'150px\',required:true,prompt:\'请输入爱好\',missingMessage:\'不能为空\'" name="pwdlist[]" value=""/></td>'+
               '<td><a href="javascript:void(0)" title="删除内容" οnclick="deltete(this)" class="easyui-linkbutton deltete" iconCls="icon-remove" plain="true"></a></td>'+
               '</tr>';
   $('#table_id').append(table_tr_add);
   //重新渲染easyui输入框
   $.parser.parse($('.input_addname').parent());
   $.parser.parse($('.input_pwd').parent());
   $.parser.parse($('.deltete').parent());
}

//删除表格当前行
function deltete(r){
   var checkRow = checkTableRow( minRow, 'table_every_tr' );   //校验行数
   if( !checkRow ){
       $.messager.alert('温馨提示', '最少添加 [ '+ minRow +' ] 条信息！', 'info');
       return;
   }

   var i=r.parentNode.parentNode.rowIndex;
   document.getElementById('table_id').deleteRow(i);

}

/**
* @todo 确认表格行数的操作
* @param row 表格的行数
* @param trClass 表格一行的class
* @return flag 是否满足条件
*/
function checkTableRow(row, trClass){
    var flag = true;
   var length = $("."+trClass).length;
   if(length == row){
       flag = false;
   }
   return flag;
}

//获取表单数据
function getFormData(){
   //提交表单操作
   var isValid = $('#table_form').form('validate');
   if (!isValid) {
       return false;
   }

   //MaskUtil.mask();
   var formData = new FormData($( "#table_form" )[0]);
   alert('值为 [ '+ formData +' ] ');

   $.ajax({
            url: '/../../..',   //后台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').datagrid('reload');   //重新加载表格[主列表表格]
                }
               // MaskUtil.unmask();
                $.messager.alert('温馨提示', result.message, 'info');
            }
        });
}
</script>

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

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添加删除表格任意行

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

最新文章

热门文章