• 点击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>

      

  • 相关阅读:
    jquery 实现跨域的简单小例子;
    jquery 实现文字轮播滚动
    js jquery 上传文件格式大小判断简单总结
    js 文本编辑插件 wangEditor 的使用教程和总结
    vue项目结构介绍
    bootstrap select下拉框模糊搜索和动态绑定数据解决方法
    bootstrap实现下拉框select option 美爆了
    jquery 获得select下拉框选择中的属性值
    Nginx + uWSGI 配置django---终极版
    django全文检索
  • 原文地址:https://www.cnblogs.com/lihui123/p/14255723.html
Copyright © 2020-2023  润新知