jquery 点击tr背景变色,及异步调用

最新推荐文章于 2022-09-07 20:00:23 发布

tiz198183

最新推荐文章于 2022-09-07 20:00:23 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： jquery function border table xhtml class

本文链接：https://blog.csdn.net/litao2/article/details/7063943

版权

JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

注：

1、aid为全局变量（不带var ）

2、对Jquery异步返回的数据进行，添加事件（为异步返回的表，添加事件）

一、Aspx 文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
.selecthover{background-color:#F69}
.lihover{background-color:#F69}
 </style>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        aid = 0;  //全局变量
        $(document).ready(function () {
            //点击事件开始
            $("#table1 tr").click(function () {
                $(this).addClass("selecthover").siblings().removeClass("selecthover");

                aid = $(this).attr("id");//全局变量赋值
                //处理开始
                $.get("Handler.ashx", { name: aid }, function (cresult) {
                    $("#table2").html(cresult);
                                //为异步返回的表，添加事件
                                $("#t1 tr").click(function () {
                                         $(this).addClass("selecthover").siblings().removeClass("selecthover");
                                              }).hover(function () {
                                                     $(this).addClass("lihover");
                                              }, function () {
                                        $(this).removeClass("lihover");
                                 });
                 });
                //处理结束

            }).hover(function () {
                $(this).addClass("lihover");
            }, function () {
                $(this).removeClass("lihover");


            });
            //点击事件结束

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
<table border="1" id="table1">
    <tr id="1">
        <td>1111111111111</td>
    </tr>
    <tr id="2">
        <td>222222222</td>
    </tr>
    <tr id="3">
        <td>3333333333</td>
    </tr>
</table>
<div id="table2">

</div>
    </form>
</body>
</html>

二、Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string cname = context.Request.Params["name"].ToString();
        context.Response.Write("<table id='t1' width='341' border='1' cellspacing='2' cellpadding='0'><tr id='1'><td>&nbsp;</td></tr><tr='2'><td>&nbsp;</td></tr></table>");
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}