双击或单击获取表格任一单元格的值，双击或单击获取表格单元个里checkbox框的属性值

最新推荐文章于 2018-11-23 15:02:00 发布

tianzhen620

最新推荐文章于 2018-11-23 15:02:00 发布

阅读量1.1k

点赞数

文章标签： checkbox js jq table表格、行、单元格遍历

本文链接：https://blog.csdn.net/tianzhen620/article/details/80432227

版权

<!DOCTYPE html>
<html>
   <head>
       <title>双击或单击获取表格任一单元格的值，双击或单击获取表格单元个里checkbox框的属性值</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
       
       <script type="text/javascript">
           $(document).ready(function() {
               //对单元格绑定dblclick事件。dblclick为双击事件，click为单机事件
               $("td").dblclick(function() {
                   //判断双击的是哪一个单元格
                   if ($(this).parent('tr').find("td").index($(this)[0]) == 3) {
                       //获取双击或单击单元格所在行的第一列的checkbox框的aa属性值。获取value属性值可以采用 .val（）；获取自定义的属性值采用
                       var s1 = $(this).parent('tr').children('td').eq(0).find("input[type='checkbox']").attr("aa");
                       //获取双击或单击单元格所在行的第三列的内容。如果获取的数据需要再次使用可以用number进行强转
                       var s2 = $(this).parent('tr').children('td').eq(2).text();
                       var s3 = $(this).parent('tr').children('td').eq(3).text();
                       var s4 = $(this).parent('tr').children('td').eq(4).text();
                       alert(s1);
                       alert(s2);
                       alert(s3);
                       alert(s4);
                   }
               });
           });
       </script>
       <script type="text/javascript">
           $(document).ready(function() {
               //判断双击的是哪一行
               $("tr").click(function() {
                   //获取该行的第一列的checkbox框的value属性值。获取value属性值可以采用 .val（）；获取自定义的属性值采用
                   var s1 = $(this).children('td').eq(0).find("input[type='checkbox']").val();
                   //获取该行的第三列的内容。如果获取的数据需要再次使用可以用number进行强转
                   var s2 = $(this).children('td').eq(2).text();
                   var s3 = $(this).children('td').eq(3).text();
                   var s4 = $(this).children('td').eq(4).text();
                   alert(s1);
                   alert(s2);
                   alert(s3);
                   alert(s4);
               });
           });
       </script>
   </head>

   <body>
       <table border="1" width="500" height="50" align="center" class="listtable">
           <thead>
               <tr>
                   <th><input type="checkbox" οnclick="checkAll()" id="checkAll" /></th>
                   <th>编号</th>
                   <th>姓名</th>
                   <th>年龄</th>
               </tr>
           </thead>
           <tbody>
               <tr bordercolor="red">
                   <td><input type="checkbox" name="checkboxid" value="111" aa="aa" /></td>
                   <td>1</td>
                   <td>张三</td>
                   <td>22</td>
                   <td>26</td>
               </tr>
               <tr>
                   <td><input type="checkbox" name="checkboxid" value="222" aa="bb" /></td>
                   <td>2</td>
                   <td>李er</td>
                   <td>25</td>
                   <td>55</td>
               </tr>
               <tr>
                   <td><input type="checkbox" name="checkboxid" value="333" aa="cc" /></td>
                   <td>3</td>
                   <td>李四</td>
                   <td>25</td>
                   <td>29</td>
               </tr>
               <tr>
                   <td><input type="checkbox" name="checkboxid" value="444" aa="dd" /></td>
                   <td>4</td>
                   <td>李db</td>
                   <td>27</td>
                   <td>57</td>
               </tr>
           </tbody>
       </table>
   </body>

</html>