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>

      

  • 相关阅读:
    网站安全策略
    防止表单重复提交的几种策略
    Laravel5中防止XSS跨站攻击的方法
    PHP + ORACLE 远程连接数据库环境配置
    iview table表格内容为数组或者对象的子元素时问题讨论
    jquery中 $(xxx).each() 和 $.each()的区别,以及enter键一键登录
    vue.js 强行赋值、刷新数组或者对象 方法之 $.set()
    vue 组件,以及组件的复用
    vue 和 jquery混合使用
    JS清除空格之trim()方法
  • 原文地址:https://www.cnblogs.com/lihui123/p/14255723.html
Copyright © 2011-2022 走看看