jquery 操作table

最新推荐文章于 2021-01-08 12:31:37 发布

笑是神的伪装

最新推荐文章于 2021-01-08 12:31:37 发布

阅读量303

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zheng199172/article/details/90636461

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>遍历Table</title>
    <link href="js/EachTable.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/EachTable.js"></script>
</head>
<body>
    <table id="tb" cellspacing="">
        <tr>
            <td>中</td>
            <td>过</td>
            <td>不</td>
            <td>ok</td>
            <td>呵呵</td>
        </tr>
        <tr>
            <td>1</td>
            <td>333</td>
            <td>4324</td>
            <td>司法所地方</td>
            <td>司法所地方</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td>ddd</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>外墙漆</td>
            <td>爱是</td>
            <td>发个</td>
            <td>高浩</td>
            <td>让他</td>
        </tr>
        <tr>
            <td>34343</td>
            <td>阿萨德</td>
            <td>安德森</td>
            <td>爱是</td>
            <td>呼庚呼癸</td>
        </tr>
    </table>
    <div id="show">鼠标移动到Table上看看</div>

</body>




<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<script type="text/javascript">
    $(function() {
    $('#tb tr td').hover(
    function() { $(this).addClass('td_hover'); },
    function() { $(this).removeClass('td_hover'); }
     );

    //table中的奇数tr添加颜色
    //$('#tb').find('tr:even').addClass('tr');
    //Table中的偶数tr添加颜色
    //$('#tb').find('tr td:odd').addClass('td');

    $('#tb td').hover(
    function() {
        //获得table的行号
        var trSeq = $(this).parent().parent().find('tr').index($(this).parent()[0]) + 1;
        //获得table的列号
        var tdSeq = $(this).parent().find('td').index($(this)[0]) + 1;
        var tdText = $(this).text();
        var big_html = '当前位置，第：' + trSeq + '行，第' + tdSeq + '列，值为：' + tdText + '。';
        $('#show').html(big_html);
    },
    function() { $('#show').html('鼠标移动到Table上看看'); });


})

     


</script>
</html>