利用JQuery实现点击某个表格时出现下拉及修改其信息

最新推荐文章于 2020-12-28 21:40:44 发布

xuan540762015

最新推荐文章于 2020-12-28 21:40:44 发布

阅读量636

点赞数

分类专栏： JQuery+JS 文章标签： jquery function xml html webservice border

本文链接：https://blog.youkuaiyun.com/xuan540762015/article/details/6562731

版权

JQuery+JS 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何使用jQuery实现当点击HTML表格时，出现下拉菜单，用户可以选择或修改信息。通过绑定事件和处理XML数据，实现动态加载和更新表格内容。示例中涉及的元素包括`<dl>`、`<dt>`和`<dd>`，以及AJAX请求用于从服务器获取和更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
.UpLayer{ margin:100px;}
.UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;}
.UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        var objStr = ".UpLayer";
        $(objStr).each(function(i) {
            $(this).click(function() {
                $($(objStr + " dd")[i]).show();
                $($(objStr + " dt")[i]).addClass("UpLayer02");
            });
            $(this).hover(function() { }, function() {
                $($(objStr + " dd")[i]).hide();
                $($(objStr + " dt")[i]).removeClass("UpLayer02");
            });
        }); //end for each
    });

//为首层链接挂接事件
    $(document).ready(function() {
        var _obj = $("dl dt span a");
        _obj.click(function() {
            var _vls = _obj.attr("vls");
            LoadXmlData(_vls);//加载XML数据
            $("#ViewMsg").html(_vls);
        });
    });

    function reLoadEvent() {
        //为下面a标签挂接事件
        $(document).ready(function() {
            $("dl dd a").click(function() {
                var _obj = $("dl dd a");
                var _objValue = $(this).attr("vls");
                UpData(_objValue);//调用函数
                $("#ViewMsg").html(_objValue);
            });
        });
    }

//更新
    function UpData(_vlsId) {
        var _updata = "updata";
        $.ajax({
            url: 'do.ashx',
            type: 'POST',
            dataType: 'text', //xml json text
            data: { updata: _updata, vlsid: _vlsId },
            timeout: 1000,
            beforeSend: loading,
            error: function(xml) {
                alert('Error loading XML document' + xml);
            },
            success: function(xml) {
                if (xml == 1) {
                    alert("OK");
                }
            }
        });
    }

//加载xml数据
    function LoadXmlData(_vlsId) {
        var _loadvalue = "loadvalue";
        var _html = "";
        var _Vobj = null;
        $.ajax({
            url: 'do.ashx',
            type: 'POST',
            dataType: 'xml', //这里可以不写，但千万别写text或者html!!!
            data: { loadvalue: _loadvalue, vlsid: _vlsId },
            timeout: 1000,
            beforeSend:loading,
            error: function(xml) {
                alert('Error loading XML document' + xml);
            },
            success: function(xml) {
                $("dl dd").html("");
                $(xml).find("listitem").each(function(i) {
                    var item_vls = $(this).children("vls").text(); //取文本
                    var item_txt = $(this).children("item").text(); //取文本
                    _Vobj = null;
                    _Vobj = "<a href=/"#/" vls=/"" + item_vls + "/">" + item_txt + item_vls + "</a>";
                    _html += _Vobj;
                });
                $("dl dd").html(_html);
                reLoadEvent();//一定要挂接事件,因为所有html代码已经被改变了
            }
        });
    }

    function loading() {

        $("dl dd").html("loading....");
    }

</script>
</head>
<body>
<div>
<div class="UpLayer">
    <dl>
        <dt><span id="span1"><a href="#" vls="99">弹出层</a></span></dt>
        <dd>
        </dd>
    </dl>
</div>
<div class="UpLayer">
    <dl>
        <dt><span id="span2"><a href="#" vls="98">弹出层2</a></span></dt>
        <dd>
        </dd>
    </dl>
</div>
<div id="ViewMsg">
</div><br/><br/></div>
如果网页有出错提示，请刷新页面再试。
</body>
</html>

do.ashx:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Text;

namespace WebApplication1
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class _do : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
             // Clear out the buffer
            context.Response.ClearHeaders();
            context.Response.ClearContent();
            context.Response.Clear();
            // Do not cache response
            context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            context.Response.ContentType = "text/xml";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            context.Response.Expires = 0;
            foreach (String o in context.Request.Params.AllKeys)
            {
                //取得参数值
                if (String.Compare(o.ToLower(), "loadvalue".ToLower()) == 0)
                {
                    context.Response.Write(LoadValData(context));
                    break;
                }
                if (String.Compare(o.ToLower(), "updata".ToLower()) == 0)
                {
                    context.Response.Write(Updata(context));
                    break;
                }
            }
            context.Response.Flush();
            context.Response.Clear();
            // Complete the request. NOTE: Do not use Response.End() here,
            // because it throws a ThreadAbortException, which cannot be caught!
            HttpContext.Current.ApplicationInstance.CompleteRequest();
        }

        /// <summary>
        ///
        /// </summary>
        /// <param name="context"></param>
        /// <returns>0出错</returns>
        private Int32 Updata(HttpContext context)
        {
            Int32 _rt = 1;
            try
            {
                object _usrObj = context.Request.Params["vlsid"];
                //更新..删除...
            }
            catch (System.Exception)
            { _rt = 0; }
            return _rt;
        }
        private String LoadValData(HttpContext context){
            object _usrObj = context.Request.Params["vlsid"];
            //return "1";
            StringBuilder _sxb = new StringBuilder(1024);
            _sxb.AppendLine("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");
            _sxb.AppendLine("<list>");

            _sxb.AppendLine("<listitem>");
            _sxb.AppendLine("<item>菜单一</item>");
            _sxb.AppendLine("<vls>10</vls>");
            _sxb.AppendLine("</listitem>");

            _sxb.AppendLine("<listitem>");
            _sxb.AppendLine("<item>菜单二</item>");
            _sxb.AppendLine("<vls>11</vls>");
            _sxb.AppendLine("</listitem>");

            _sxb.AppendLine("<listitem>");
            _sxb.AppendLine("<item>菜单三</item>");
            _sxb.AppendLine("<vls>12</vls>");
            _sxb.AppendLine("</listitem>");

            _sxb.AppendLine("</list>");

            _sxb.AppendLine("");
            return _sxb.ToString();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}