js实现html table 行,列锁定的简单实例

实现 HTML table 行、列锁定是一个比较常见的需求，可以很好地优化表格数据的可读性和易用性。下面是一个简单的实例说明如何用 JavaScript 实现 HTML table 行、列锁定。

实现思路

实现 HTML table 行、列锁定的思路很简单，就是通过改变 table 中每个单元格的 position 和 zIndex 来实现行、列的固定。

具体来说，就是通过鼠标滚动事件来检测 table 的位置，然后动态地改变每个单元格的 position 和 zIndex 属性。当 table 的左上角滚动出浏览器视窗时，固定行和列，通过设置单元格的 position 为 "fixed"，并将其置于所有单元格之上，也就是设置其 zIndex 属性为更高。当 table 重新回到浏览器视窗中时，则释放行和列，将单元格的 position 和 zIndex 属性恢复原来的值。

代码示例

为了方便起见，在这里我们用 jQuery 作为 JavaScript 实现行、列锁定的工具。

$(document).ready(function(){
    var table = $('#mytable');

    // 获取顶部固定列和左侧固定行
    var fixedRows = table.find('tr:lt(3)');
    var fixedCols = table.find('tr td:nth-child(-n+3)');

    // 固定列的位置和 z-index
    fixedCols.each(function(){
        $(this).css({ 'position': 'fixed', 'z-index': '1' });
    });

    // 固定顶部行的位置和 z-index
    fixedRows.each(function(){
        $(this).find('td').css({ 'position': 'fixed', 'z-index': '2' });
    });

    // 滚动事件处理程序
    table.parent().scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollLeft = $(this).scrollLeft();

        // 固定行和列，并设置其位置和 z-index
        fixedRows.each(function(){
            $(this).find('td').css({ 'left': scrollLeft+'px' });
        });

        fixedCols.each(function(){
            $(this).css({ 'top': scrollTop+'px' });
        });
    });
});

上面的代码实现了一个简单的行、列锁定效果，具有良好的可读性和易用性。你可以将其扩展为支持更多的表格功能，比如固定表头等。

下面是一个完整的示例，可以更好地说明 JavaScript 实现行、列锁定的过程。

<!DOCTYPE html>
<html>
<head>
    <title>Locking HTML Table Rows and Columns with JavaScript</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td, th {
            padding: 5px;
            border: 1px solid black;
            background-color: #fff;
        }
        .locked-col {
            position: fixed;
            z-index: 1;
            background-color: #eee;
        }
        .locked-row {
            position: fixed;
            z-index: 2;
            background-color: #ddd;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="mytable">
        <thead>
            <tr>
                <th></th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="locked-col"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td class="locked-col"></td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td class="locked-col"></td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
            </tr>
            <tr>
                <td class="locked-row"></td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
            </tr>
            <tr>
                <td class="locked-row"></td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
            </tr>
            <tr>
                <td class="locked-row"></td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function(){
            var table = $('#mytable');

            // 获取顶部固定列和左侧固定行
            var fixedRows = table.find('tr:lt(3)');
            var fixedCols = table.find('tr td:nth-child(-n+3)');

            // 固定列的位置和 z-index
            fixedCols.each(function(){
                $(this).addClass('locked-col');
            });

            // 固定顶部行的位置和 z-index
            fixedRows.each(function(){
                $(this).find('td').addClass('locked-row');
            });

            // 滚动事件处理程序
            table.parent().scroll(function(){
                var scrollTop = $(this).scrollTop();
                var scrollLeft = $(this).scrollLeft();

                // 固定行和列，并设置其位置和 z-index
                fixedRows.each(function(){
                    $(this).find('.locked-row').css({ 'left': scrollLeft+'px' });
                });

                fixedCols.each(function(){
                    $(this).find('.locked-col').css({ 'top': scrollTop+'px' });
                });
            });
        });
    </script>
</body>
</html>

上面的代码中，我们使用了 position: fixed 和 z-index 来实现 HTML table 行、列的固定，并使用了 jQuery 框架来简化 JavaScript 代码的编写。在这里，我们分别使用了类名 locked-row 和 locked-col 来实现行、列的固定样式，并将其添加到对应的单元格中。

这个示例演示了如何锁定表格的前三行和前三列，并在滚动 table 时固定它们。你可以自己尝试修改代码，用不同的参数锁定不同的行和列。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现html table 行,列锁定的简单实例 - Python技术站

js实现html table 行,列锁定的简单实例

实现思路

代码示例

相关文章