Question

我有以下代码可以使表格中的单元格可以调整大小，并且取消选中时页面底部的复选框会删除表格单元格。（复选框有效，但表格没有调整大小）。以前报告过这是位于此处的重复帖子 Uncaught TypeError: Cannot read property 'lastChild' of null

但不是。如果有人能帮我解决两个问题，我会很高兴。我是.Net开发人员，并且对Javascript了解不多，所以请尽可能详细。

表格单元格不会调整大小
如果要让它们调整大小，可以将代码更改为具有左上角，右上角，左下角和右下角的4格单元格表。

https://jsfiddle.net/18k3umpp/3/

仅供参考：我也尝试将javascript放在标记之前。

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Home</title>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery-ui.js"></script>
        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                height: 100%;
            }

            table {
                width: 100%;
                height: 90%;
            }

            table td {
                text-align: center;
                border: 1px solid black;
            }

            #views-container {
                height: 10%;
            }
        </style>

        <script type="text/javascript">
            /**
             * Created by yako on 1/25/16.
             */
            var tds = document.getElementsByTagName('td');
            var inputs = document.getElementsByTagName('input');
            var rows = document.getElementsByTagName('tr');

            console.log(inputs);
            console.log(tds);
            var changeView = function () {

                for (var i = 0; i < inputs.length; i++) {
                    if (!inputs[i].checked) {
                        if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
                    } else {
                        if (tds[i].style.display === 'none') tds[i].style.display = '';
                    }
                }

                if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
                else rows[0].style.display = '';

                if (!inputs[2].checked) rows[1].style.display = 'none';
                else rows[1].style.display = '';

            };

            changeView();



            $(window).on("load resize", function () {

                var windowWidth = $(window).width();
                var windowHeight = $(window).height();
                var v1Width = $("#v1").width()


                $("#v1").resizable({
                    minWidth: 50,
                    maxWidth: windowWidth - 80,
                    maxHeight: windowHeight * (.83),
                    handles: "e, s"
                }).on("resize", function () {

                    if (v1Width == $("#v1").width()) {
                        $("#v2").height(0)
                    }
                    v1Width = $("#v1").width()
                });

                $("#v2").resizable({
                    maxHeight: windowHeight * (.83),
                    handles: "s"
                }).on("resize", function () {
                    $("#v1").height(0)
                });

            });
        </script>

    </head>

    <body>
        <table>
            <tr>
                <td id="v1">View 1</td>

                <td id="v2">View 2</td>
            </tr>

            <tr>
                <td colspan="2">View 3</td>
            </tr>
        </table>
        <div id="views-container">
            <input type="checkbox" checked="checked" onclick="changeView()">
            <label>View 1</label>
            <input type="checkbox" checked="checked" onclick="changeView()">
            <label>View 2</label>
            <input type="checkbox" checked="checked" onclick="changeView()">
            <label>View 3</label>
        </div>
    </body>
</html>

Answer 1

您可以检查Chrome开发人员工具是否有错误。我认为你的问题是你没有使用正确的jQuery脚本。尝试在标题标记后添加：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

编辑：

确定标题标记后只放置链接标记和样式标记。在正文结束之前按以下顺序放置脚本标记：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
yako script

如果你不想使用cdn，你可以从这里下载jQuery：https://code.jquery.com/jquery-3.1.1.min.js，并在src属性中直接下载到这个文件。

部分Javascript不起作用

1 个答案:

编辑：