Javascript HTML无法识别显示：元素无_Javascript_Html_Css_Twitter Bootstrap_Bootstrap 4

Javascript HTML无法识别显示：元素无

javascript html css twitter-bootstrap bootstrap-4

Javascript HTML无法识别显示：元素无,javascript,html,css,twitter-bootstrap,bootstrap-4,Javascript,Html,Css,Twitter Bootstrap,Bootstrap 4,我正在使用Python Flask处理一个网页，我希望该网页在用户提交表单后的加载期间显示一个图像。我尝试将加载的元素设置为在单击表单之前显示为无，然后顶部的javascript函数应使其在后台内容隐藏时可显示问题是，当我加载网页时，图像已经存在。提交表单后，背景内容消失，图像保留，因此JS函数似乎工作正常。我只是不知道为什么图像一开始没有隐藏在img{display:none}部分，我尝试使用loading_gif代替img和loading_gif，但两者都不起作用 <!DOCTYP

我正在使用Python Flask处理一个网页，我希望该网页在用户提交表单后的加载期间显示一个图像。我尝试将加载的元素设置为在单击表单之前显示为无，然后顶部的javascript函数应使其在后台内容隐藏时可显示

问题是，当我加载网页时，图像已经存在。提交表单后，背景内容消失，图像保留，因此JS函数似乎工作正常。我只是不知道为什么图像一开始没有隐藏

在img{display:none}部分，我尝试使用loading_gif代替img和loading_gif，但两者都不起作用

<!DOCTYPE html>
<html lang = "en">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script type = "text/javascript">
    function loading(){
        document.getElementById("loading_gif").style.display = 'block';
        document.getElementById("content").style.display = 'none';
    }
</script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;

img {
    display: none;
}

</style>

<body>
    <img id = "loading_gif" src="{{url_for('static', filename='image.gif')}}">
    <div id = "content">
        <h1><center>Track Your Packages!</center></h1>
        <center>UPS, USPS, or FedEx</center>

        <form method = "POST">
                <input type = "text", placeholder = "Add Tracking Number", name = "AddTrackingNum">
                <input class = "btn btn-primary" type = "submit", onclick = "loading(); return False;">
        </form>
        <form method = "POST">
                <input type = "text", placeholder = "Remove Tracking Number", name = "RemoveTrackingNum">
                <input class = "btn btn-primary" type = "submit">
        </form>
        <body>Last update: {{current_dateTime}}</body>
                <div class="container" style="min-height:100% width:80%">
                {% with messages = get_flashed_messages() %}
                  {% if messages %}
                    {% for message in messages %}
                      <div class="alert alert-warning alert-dismissible" role="alert">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                        {{message}}
                      </div>
                    {% endfor %}
                  {% endif %}
                {% endwith %}

                {% block body %}{% endblock %}
                </div>


              <table>
               <tr>
                <th>Company</th>
                <th>Tracking Number</th>
                <th>Location</th>
                <th>Status</th>
                <th>As of </th>
                <th>Scheduled Delivery Date</th>
               </tr>

               {%for i in tableDict%}
               <tr>
                   {%for y in tableDict[i]%}
                     <td>{{y}}</td>
                   {%endfor%}
                 {%endfor%}
               </tr>

              </table>
        </div>

</body>

</html>

这是因为语法问题，您需要关闭tr:nth childeven brace 样式应如下所示：

<style>
table {
 font-family: arial, sans-serif;
 border-collapse: collapse;
 width: 100%;
}

td, th {
 border: 1px solid #dddddd;
 text-align: left;
 padding: 8px;
}

tr:nth-child(even) {
 background-color: #dddddd;
}

img {
 display: none;
}
</style>

将loading_gif{display:none}添加到CSSY您以tr:nth childeven开头的样式似乎没有右括号，这意味着您的img样式将被忽略。