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="添加内容" onclick="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="删除内容" onclick="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" onclick="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="删除内容" onclick="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添加删除表格任意行

猜你喜欢