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>

      

  • 相关阅读:
    解决通用串行总线(USB)控制器有感叹号
    开发者需要了解的WebKit
    Win7系统搭建WiFi热点详细攻略
    给Qt生成的exe执行程序添加版本信息
    IIS(IISReset.exe)命令行
    .net开发微信公众平台
    使用ExitProcess()结束本进程、TerminateProcess 结束进程
    Hosts文件路径及修改方法
    本地动态SQL
    Oracle Package
  • 原文地址:https://www.cnblogs.com/lihui123/p/14255723.html
Copyright © 2011-2022 走看看