杰晶网络

jquery动态添加删除(tr/td)
网络编程 2024/11/14 佚名
3 2

代码很简单，实现的功能也很简单，有需要的小伙伴参考下吧。

复制代码 代码如下:
<head runat="server">
    <title></title>
    <!--easyui -->
    <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="../../script/easy_ui/themes/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../script/jquery-easyui-1.3.2/themes/default/easyui.css" />
    <link href="../../css/function.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.2.js">     <script type="text/javascript" src="/UploadFiles/2021-04-02/easyui-lang-zh_TW.js">     <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.easyui.min.js">     <script type="text/javascript" src="/UploadFiles/2021-04-02/easyui-lang-zh_CN.js">     <!--上传控件 -->
    <link href="../../css/images/style.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src="/UploadFiles/2021-04-02/swfupload.js">     <script type='text/javascript' src="/UploadFiles/2021-04-02/swfupload.queue.js">     <script type="text/javascript" src="/UploadFiles/2021-04-02/swfupload.handlers.js">     <script src="../../script/jquery.form.min.js">     <script type="text/javascript" src="/UploadFiles/2021-04-02/function.js">     <!--编辑器 -->
    <script type="text/javascript" charset="utf-8" src="/UploadFiles/2021-04-02/kindeditor-min.js">     <script type="text/javascript" charset="utf-8" src="/UploadFiles/2021-04-02/zh_CN.js">     <script type="text/javascript">
        /* jquery easyui 操作*/
        window.onload = function () {
            InitGird();
        }
        //加载编辑器
        var editor;
        $(function () {
            editor = KindEditor.create('textarea[name="Describe"]', {
                resizeType: 1,
                uploadJson: '../ashx/upload_ajax.ashx"../ashx/upload_ajax.ashx", "Filedata", "1024 KB", "../../script/swfupload/swfupload.swf", 1, 1);
        });
        //搜索
        function Search() {
            $('#dgCaseInfo').datagrid('load', {
                action: "loadListPage",
                Names: $("#Names").val()
            });
        }
        //初始化表格
        function InitGird() {
            $("#dgCaseInfo").datagrid({
                autoRowHeight: false,
                loadMsg: '正在努力加载中...',
                url: '../ashx/GetSm_CaseInformation.ashx"") {
                                  return '<a href=javascript:ShowBigview(' + index + ')><img alt="照片" src="/UploadFiles/2021-04-02/..' + row.FilePath + '">                               } else {
                                  return "暂无图片"
                              }
                          }
                      },
                      { field: 'Flag', title: '状态', width: 100, align: 'left',
                          formatter: function (value, row, index) {
                              if (row.Flag == 0) {
                                  return "上架";
                              } else {
                                  return "下架";
                              }
                          }
                      },
                      { field: 'TypeID', title: '商品类型', width: 100, align: 'left', hidden: true },
                      { field: 'MonadID', title: '企业名称', width: 100, align: 'left', hidden: true },
                      { field: 'MonadName', title: '企业名称', width: 100, align: 'left', hidden: true }
                      ]],
                toolbar: "#toolbar",
                queryParams: { "action": "query" },
                pagination: true, //是否开启分页
                pagePosition: 'bottom', //分页位置
                pageNumber: 1, //默认索引页
                pageSize: 10, //默认一页数据条数
                onDblClickRow: function (rowIndex, rowData) {//行双击事件
                    Edit();
                }
            })
        }
        var url;
        //添加一条数据
        function Add() {
            $("#tdLeft").remove();//删除秒杀时间td
            $("#tdSeckill").remove(); //删除秒杀时间td
            loadTypeID();
            editor.html("");
            $('#dlg').dialog('open').dialog('setTitle', '添加');
            $('#form1').form('clear');
            url = '../ashx/GetSm_CaseInformation.ashx"input[name='Flag']").eq(0).attr('checked', 'true');
        }
        //编辑修改
        function Edit() {
            $("#tdLeft").remove(); //删除秒杀时间td
            $("#tdSeckill").remove(); //删除秒杀时间td
            loadTypeID();
            url = '../ashx/GetSm_CaseInformation.ashx"#imageCaseUrl").attr("src", "../.." + $('#FilePath').val()); //设置<image id="imageCaseUrl">的url
                editor.html(row["Describe"]);
                if (row["IsSeckill"]==1)//如果该商品是秒杀状态 则：
                {
                    $("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒杀时间：</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin"  class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd"  class="easyui-datetimebox" name="SeckillDateEnd"  style="width:150px"></td>')
                    //初始化easyui日期控件
                    $('#SeckillDateBegin').datetimebox({
                        required: true,
                        showSeconds: false
                    });
                    $('#SeckillDateEnd').datetimebox({
                        required: true,
                        showSeconds: false
                    });
                }
                $('#form1').form('load', row);
                $("#Flag ").val(row["Flag"]); //设置状态值
            }
        }
        //保存数据
        function Save() {
            editor.sync();
            $('#form1').form('submit', {
                url: url,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (result) {
                    if (result <= 0) {
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dgCaseInfo').datagrid('reload');    // reload the user data
                    }
                }
            });
        }
        //删除一条数据
        function destroy() {
            var row = $('#dgCaseInfo').datagrid('getSelected');
            if (row) {
                $.messager.confirm('消息提示', '确定要删除吗？', function (r) {
                    if (r) {
                        $.post('../ashx/GetSm_CaseInformation.ashx"#dgCaseInfo").datagrid('getRows')[rowIndex];
            if (row["FilePath"].toString() != "") {
                $.messager.alert('大图预览', '<img alt=""  src=../..' + row["FilePath"] + ' width="100px" height="100px" />');
            } else {
                $.messager.alert('消息提示', '未设置标题图片！');
            }
        }
        //点击单选按钮 正常时激发
        function DisDate() {
            $("#tdLeft").remove(); //删除秒杀时间td
            $("#tdSeckill").remove(); //删除秒杀时间td
        }
        //点击单选按钮 秒杀时激发
        function HideDate() {
            $("#tdLeft").remove(); //删除秒杀时间td
            $("#tdSeckill").remove(); //删除秒杀时间td
            $("#trSeckill").append(' <td id="tdLeft" class="tab_td_right" style="width:80px;">秒杀时间：</td><td id="tdSeckill" class="tab_td_left"><input id="SeckillDateBegin"  class="easyui-datetimebox" name="SeckillDateBegin" style="width:150px"> 至<input id="SeckillDateEnd"  class="easyui-datetimebox" name="SeckillDateEnd"  style="width:150px"></td>')
            //初始化easyui日期控件
            $('#SeckillDateBegin').datetimebox({
                required: true,
                showSeconds: false
            });
            $('#SeckillDateEnd').datetimebox({
                required: true,
                showSeconds: false
            }); 
        }
    </script>
</head>
<body>
    <table id="dgCaseInfo">
    </table>
    <div id="toolbar" style="width: 100%">
        <div style="padding-top: 5px; width: 100%">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
                onclick="Add()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"
                    plain="true" onclick="Edit()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton"
                        iconcls="icon-remove" plain="true" onclick="destroy()">删除</a>
        </div>
        产品名称：<input id="Names" name="Names" class="easyui-validatebox" type="text" />
        <a id="search" href="#" onclick="Search()" class="easyui-linkbutton" plain="true"
            data-options="iconCls:'icon-search'">搜索</a>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:800px; height: 400px; padding: 10px;"
        closed="true" buttons="#dlg-buttons">
        <div class="ftitle">
            产品信息</div>
        <form id="form1" runat="server" method="post">
        <table id="table_edit" class="tab" style="width: 98%; font-size: 12px; border: 1px #E1E1E1 solid" cellpadding="0"
            cellspacing="1">
            <tr class="tab_tr" style="display: none;">
                <td colspan="4">
                    <input name="ID" class="easyui-validatebox" />
                    <input name="MonadID" class="easyui-validatebox" />
                </td>
            </tr>
            <tr style="height: 26px;" class="tab_tr">
                <td class="tab_td_right" style="width:80px;">
                    商品名称：
                </td>
                <td class="tab_td_left">
                    <input name="Name" class="easyui-validatebox" required="true" style="width:150px" />
                </td>
                <td class="tab_td_right" style="width:80px;">
                    商品类型：
                </td>
                <td class="tab_td_left">
                    <input id="TypeID" name="TypeID" style="width: 200px" required="true" />
                </td>
            </tr>
            <tr style="height: 26px; "  class="tab_tr">
                <td class="tab_td_right" style="width:80px;">
                    商品价格：
                </td>
                <td class="tab_td_left">
                    <input name="Price" class="easyui-validatebox" required="true" style="width: 150px" />
                </td>
                <td class="tab_td_right" style="width:80px;">
                    商品折扣：
                </td>
                <td class="tab_td_left">
                    <input id="Discount" name="Discount" style="width: 200px" />
                </td>
            </tr>
            <tr style="height: 26px; "  class="tab_tr">
                <td class="tab_td_right" style="width:80px;">
                    库存数量：
                </td>
                <td class="tab_td_left">
                    <input id="InventoryNumber" name="InventoryNumber" style="width: 150px" />
                </td>
                <td class="tab_td_right" style="width:80px;">
                    卖出件数：
                </td>
                <td class="tab_td_left">
                    <input id="SellNumber" name="SellNumber" style="width: 200px" />
                </td>
            </tr>
            <tr style="height: 26px; "  class="tab_tr">
                <td class="tab_td_right" style="width:80px;">
                    状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 态：
                </td>
                <td class="tab_td_left">
                    上架<input name="Flag" type="radio" value="0" />&nbsp&nbsp&nbsp
                    下架<input name="Flag" type="radio" value="1" />
                </td>
                <td class="tab_td_right" style="width:80px;">
                   是否热销：
                </td>
                <td class="tab_td_left">
                    正常<input name="IsHotSell" type="radio" value="0" />&nbsp&nbsp&nbsp
                    热销<input name="IsHotSell" type="radio" value="1" />
                </td>
            </tr>
            <tr style="height: 26px; "  class="tab_tr" id="trSeckill">
                <td class="tab_td_right" style="width:80px;">
                    秒杀状态：
                </td>
                <td class="tab_td_left" >
                    正常<input name="IsSeckill" type="radio" value="0"  onclick="DisDate()"/>&nbsp&nbsp&nbsp
                    秒杀<input name="IsSeckill" type="radio" value="1"  onclick="HideDate()"/>
                </td>
                <%-- <td class="tab_td_left" >
                <input id="SeckillDateBegin" disabled="disabled" class="easyui-datetimebox" name="SeckillDateBegin" data-options="required:true,showSeconds:false"  style="width:150px"> 
               至<input id="SeckillDateEnd" disabled="disabled" class="easyui-datetimebox" name="SeckillDateEnd" data-options="required:true,showSeconds:false"  style="width:150px">
                </td>--%>
            </tr>
            <tr style="height: 26px; "  class="tab_tr">
                <td class="tab_td_right" style="width:80px;">
                    产品照片：
                </td>
                <td class="tab_td_left" colspan="3">
                    <div>
                        <asp:TextBox ID="FilePath" name="FilePath" runat="server" CssClass="txtInput normal left"
                            MaxLength="255"></asp:TextBox>
                        <a href="javascript:;" class="files">
                            <input type="file" id="FileUpload" name="FileUpload" onchange="Upload('SingleFile', 'FilePath', 'FileUpload');" /></a>
                        <span class="uploading">正在上传，请稍候...</span>
                    </div>
                </td>
            </tr>
            <tr style="height: 26px;"  class="tab_tr">
                <td class="tab_td_right" style="width:80px;">
                    描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 述：
                </td>
                <td class="tab_td_left" colspan="3">
                    <textarea id="Describe" name="Describe" style="width: 99%; height: 100px; visibility: hidden;"
                        runat="server"></textarea>
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="Save()">
            保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
                onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</body>

以上就是本文的全部内容了，希望大家能够喜欢。

标签：
jquery,添加删除,tr,td
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“jquery动态添加删除(tr/td)”
暂无“jquery动态添加删除(tr/td)”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网