jquery获取点击标签内的子标签内容和值实例

Posted 拿着菜刀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery获取点击标签内的子标签内容和值实例相关的知识,希望对你有一定的参考价值。

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

<!--<%@ 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获取点击标签内的子标签内容和值实例的主要内容,如果未能解决你的问题,请参考以下文章

怎么使用jquery获得标签的值或元素的内容

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

Python怎样获取XPath下的A标签的内容

jQuery怎样获取并且修改P标签内的值

jQuery怎样获取并且修改P标签内的值

js如何获取某id的子标签