今天有点累了，就不多做其他的描述解释。在插入的代码里相关解释也都有。

<!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<html xmlns="http://www.w3.org/1999/xhtml">-->

<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">-->

<!DOCTYPE html>

<html>

<head>

   <!-- <base href="<%=basePath%>">-->

   <!-- <%@ include file="/include/meta.jsp"%>

    <title>My JSP 'hello.jsp' starting page</title>-->

    <meta charset="UTF-8">

    <script src="js/jquery.js"></script>

    <!--   <meta http-equiv="pragma" content="no-cache">

       <meta http-equiv="cache-control" content="no-cache">

       <meta http-equiv="expires" content="0">

       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

       <meta http-equiv="description" content="This is my page">-->

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

</head>

<style type="text/css">

div{

    margin-left: 30px;

}

table{

    border: 1px double #b8d4d1;

    /*消除表格之间的间距*/

    border-collapse: collapse;

}

th{

    border-top: 1px double #b8d4d1;

    border-right: 1px double #b8d4d1;

    font-size: 20px;

    text-align: center;

    /*必须存在最大的宽度否则td里的信息不会缩略显示*/

    max-width: 50px;

    /*规定段落中的文本不进行换行*/

    white-space: nowrap;

    /*内容过多的隐藏*/

    overflow: hidden;

    /*溢出的文字显示为省略号*/

    text-overflow: ellipsis;

    /*消除表格之间的间距*/

    /*border-collapse: collapse;*/

    background: linear-gradient(#cafce7,#ffffff);

    background:-moz-linear-gradient(top,#cafce7,#ffffff);

    background:-webkit-linear-gradient(top,#cafce7,#ffffff);

}

td {

    border-top: 1px double #b8d4d1;

    border-right: 1px double #b8d4d1;

    text-align: center;

    /*必须存在最大的宽度否则td里的信息不会缩略显示*/

    max-width: 50px;

    /*规定段落中的文本不进行换行*/

    white-space: nowrap;

    /*内容过多的隐藏*/

    overflow: hidden;

    /*溢出的文字显示为省略号*/

    text-overflow: ellipsis;

    /*消除表格之间的间距*/

    /*border-collapse: collapse;*/

  /*  background: linear-gradient(#cafce7,#ffffff);

    background:-moz-linear-gradient(top,#cafce7,#ffffff);

    background:-webkit-linear-gradient(top,#cafce7,#ffffff);*/

}

    #top{

        height: 100px;

    }

#bottom{

    height: 400px;

    border: 1px double #b8d4d1;

}

/*鼠标停留在tr标签上时改变颜色*/

    tr:hover{

        background-color: #e4e8ec;

    }

</style>

<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        //将点击的tr对象化

        $("tr").click(function () {

        //在点击事件里使用children()方法和eq(1)方法获取tr下的每个td元素的内容

              var username=$(this).children().eq(1).text();

              var password=$(this).children().eq(2).text();

               //在个input标签赋值

            $("#username").val(username);

            $("#password").val(password);

        });

    });

</script>

<body>

<div id="top">

<form action="myUser/save" method="post">

    <input type="hidden"  name="id"/>

    帐号：<input type="text"  id="username" name="username"/><br/>

    密码：<input type="text"  id="password" name="password"/><br/>

                     <input type="submit" style="float:none;" value="保存"/>

</form>

</div>

<div id="bottom">

    <table cellpadding="0" cellspacing="0" border="0" width="100%">

        <thead>

        <tr>

            <th>序号</th>

            <th>帐号</th>

            <th>密码</th>

            <th>操作</th>

        </tr>

        </thead>

        <tbody>

       <!-- <c:forEach items="${pageInfo.content}" var="MyUser" varStatus="status">

            <tr>

                <td>

                    ${status.count}

                </td>

                <td>

                    ${MyUser.username}

                </td>

                <td>

                    ${MyUser.password}

                </td>

                <td><a href="myUser/del?id=${MyUser.id}">删除</a></td>

            </tr>

        </c:forEach>-->

       <tr>

           <td>主键</td>

           <td>帐号</td>

           <td>密码</td>

           <td>操作</td>

       </tr>

       <tr>

           <td>主</td>

           <td>帐号1</td>

           <td>密码1</td>

           <td>操作</td>

       </tr>

        </tbody>

    </table>

</div>

<!--<tags:pagination page="${pageInfo}" paginationSize="5"/>-->

</body>

</html>

jquery获取点击标签内的子标签内容和值实例的更多相关文章

  1. 织梦channel标签内调用子栏目内容

    文件:include\taglib\channel.lib.php 把代码 SELECT id,typename,typedir,isdefault,ispart,defaultname,nameru ...

  2. MyBatis配置文件中的标签mappers的子标签mapper的url属性

    在浏览器中输入file:/可以打开访达根目录,file:后面至少跟一个杠 MyBatis配置文件中的标签mappers的子标签mapper的url属性中file:后面至少要跟两个杠

  3. jQuery获取点击对象的父级

    一.使用$('body').on('click','.index',function(event){})绑定事件时,例: <div class="project-box"&g ...

  4. 关于Jquery获取Table中td内的内容

    $(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有 ...

  5. jquery怎么获取当前标签下的子标签

    1.var num1=$("ul > a:eq(0)").attr("ID");2.var num2=$("ul").children ...

  6. jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值

    写html时这样绑定 <input type="text" name="address4" id="address4" onFocus ...

  7. jquery获取点击控件的绝对位置简单实例

    在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to t ...

  8. jquery获取li里面的第一个a标签

    $("li").children("a:eq(0)") ; children()查找子元素,eq() 查找第几个 $('.active').children(& ...

  9. jquery获取具有多个类class的标签内容

    var tag = $('div.firstClassName.secondClassName.thirdClassName'); 注意空格

随机推荐

  1. Atitit.5gl 第五代语言编程语言 PROLOG教程  人工智能语言的标准 与实现

    Atitit.5gl 第五代语言编程语言 PROLOG教程  人工智能语言的标准 与实现 1. 第五代语言就是自然语言又被称为知识库语言或人工智能语言,1 2. 人工智能语言特点2 2.1. 试探法2 ...

  2. html+JS刷图实现视频效果

    网页播放视频须要载入播放器,可是通过刷图也能实现视频播放的效果 JS中用到Z-index属性,记录一篇解说Z-index属性的博客的地址: http://www.cnblogs.com/gisdrea ...

  3. Unity3d 实现鼠标左键点击地形使角色移动到指定地点[脚本]

    Unity3d 实现鼠标左键点击地形使角色移动到指定地点[脚本] 2013-02-19 15:29:33     我来说两句      作者:nnsword 收藏    我要投稿 其中涉及,移动速度, ...

  4. bzoj3174【TJOI2013】解救小矮人

    3174: [Tjoi2013]解救小矮人 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 573  Solved: 293 [Submit][Stat ...

  5. hadoop partitioner个数与reducer个数的试验

    job.setPartitionerClass(myPartitioner.class);//设置了5个 job.setNumReduceTasks(2); 1.当分区数等于rducer数量时,正常运 ...

  6. nandecc--am335x

    u-boot支持下列NAND ECC算法: 1.S/W ECC(Hamming code),软件ECC校验. 2.H/W ECC(Hamming code,BCH8). BCH Flash OOB L ...

  7. Linux Apache安装加载mod_deflate模块

    为了开启apache服务器中的gzip压缩功能,mod_deflate模块是必须安装加载的.现在介绍如何安装.1.进入到mod_deflate.c目录 cd /lamp/httpd-2.2.20/mo ...

  8. apache占用内存高解决办法

    我用512M的vps,访问量不大,但内存占用很大,甚至宕机. 我用top,然后shitf+m发现,httpd占用内存极大.经过网上找资料设置后,用过一段时间终于没再出现内存问题了. 首先查找配置文件的 ...

  9. PHP-Manual的学习----【语言参考】----【类型】-----【对象】

    Object 对象1.对象初始化要创建一个新的对象 object ,使用 new 语句实例化一个类: class foo{    function do_foo(){        echo &quo ...

  10. Jmeter 05 JMeter元件详解

    1. JMeter 逻辑控制器 Switch条件控制器.While条件控制器.交替控制器.仅一次控制器.随机控制器.随机顺序控制器.条件控制器(如果(if)).循环控制器.录制控制器.ForEach控 ...