zoukankan      html  css  js  c++  java
  • 点击td获取tr的所有值

    废话不说,复制粘贴看效果。(可在任意地方创建html 文件)

      注:因为里面引入的 bootstrap.min.cssjquery-2.1.4.min.js文件是在线的,需要连接网格使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <body>
    <button type="button" class="btn btn-warning" id="upd">获取数据</button>
    <table class="table table-hover" id="dataTable1">

    <thead>
    <tr>
    <th></th>
    <th>ID</th>
    <th>用户名</th>
    <th>用户密码</th>
    </tr>
    </thead>
    <tbody id="table">

    <tr class='ss'>
    <td><input type='checkbox' name='checkItem' class='btnSelect' /></td>
    <td name='uid'>1</td>
    <td name='username' >张三</td>
    <td name='password'>123</td>
    </tr>
    <tr class='ss'>
    <td><input type='checkbox' name='checkItem' class='btnSelect' /></td>
    <td name='uid'>2</td>
    <td name='username'>李四</td>
    <td name='password'>321</td>
    </tr>
    <tr class='ss'>
    <td><input type='checkbox' name='checkItem' class='btnSelect' /></td>
    <td name='uid'>3</td>
    <td name='username'>王五</td>
    <td name='password'>213</td>
    </tr>
    </tbody>
    </table>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <script>

    $("#upd").click(function () {
    var uid;
    var username;
    var password;
    var len = $("input:checkbox:checked").length;
    var check = $("input[name='checkItem']:checked");
    check.each(function () {
    var row = $(this).parent("td").parent("tr");
    uid = row.find("[name='uid']").html();
    username = row.find("[name='username']").html();
    password = row.find("[name='password']").html();
    });
    if(len===1){
    alert(uid+" "+username+" "+password);
    }else{
    alert("请选择一条数据")
    }
    });
    </script>
    </body>
    </html>

      

  • 相关阅读:
    Python连接redis时要注意的点
    Python SQLAlchemy多对多外键关联时表结构
    SQLAlchemy中解决数据库访问时出现的Incorrect string value: xxx at row 484
    HDFS集群数据不均衡处理
    elasticsearch数据过期删除处理
    docker使用技巧小记
    kubeadm部署kubernetes-1.12.0 HA集群-ipvs
    k8s全栈监控之metrics-server和prometheus
    k8s小工具
    k8s集群之上游dns--dnsmasq,统一管理kubernetes的dns解析
  • 原文地址:https://www.cnblogs.com/lihui123/p/14255723.html
Copyright © 2011-2022 走看看