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

<!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" onclick="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>

猜你喜欢

转载自blog.csdn.net/tianzhen620/article/details/80432227
今日推荐