Question

我在HTML表格中有一个特定的行，我不希望在页面加载时显示这些行。页面加载后会返回一个Ajax请求，返回填充表行的值。所以我想在Ajax返回响应后才显示这些行，直到那时我想显示一条'loading'消息来代替这些行。我尝试在div中添加这些行并适当地使用jquery的show（）/ hide（）但这不起作用。我是JS和jQuery的新手，所以感谢任何帮助。

    <html>
    <body onload="my_ajax_func()">
    <table>
    .
    . <!-- Other rows that will be displayed-->
    .
    <tr>
        <th colspan=2 class="custHeader">High Value Flags</th>
    </tr>
    <tr>
        <td align=right><div id="loading_msg"><b>Loading..</b></div></td>
    </tr>
    <tr>
        <td id="val_header" class=caption>Value Tier:&nbsp;</td><td id="val"> </td>
    </tr>
    <tr>
        <td id="hypo_val_header" class=caption>Hypo Value Tier:&nbsp;</td><td id="hypo_val"> </td>
    </tr>
    <tr>
        <td id="service_type_header" class=caption>Service Type:&nbsp;</td><td id="service_type"></td>
    </tr>
</table>
</body>

<script>
function my_ajax_func() {
    //retrieves values for table rows
    //on success calls another func, say display_data
}
function display_data() {
    $("loading_msg").hide();
document.getElementById("val").innerHTML = <some_value>;
document.getElementById("hypo_val").innerHTML = <some_value>;
document.getElementById("service_type").innerHTML = <some_value>;
}
</script>
</html>

基本上，我想要一个div'加载'消息，默认显示。成功完成Ajax请求后，必须隐藏该div，并且必须在其中显示另一个div（带有这两个表行）。

Answer 1

要在页面加载时隐藏行，只需创建两个css类，如下所示：

.displayNone{
    display:none;
}

.displayBlock{
    display:block;
}

并在行中使用此类

<tr class="displayNone"></tr>

因此，当页面加载时，这些行将被隐藏。

所以，在ajax的成功中把这个js：

$(".displayNone").removeClass("displayNone").addClass("displayHidden");

然后，下载一些像这样的加载gif图像：

http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif

之后，将这个img标签包装在一个带有“displayNone”类的div中，并使用相反的行方式：

在你的ajax调用之前，从中删除“displayNone”类，然后输入“displayBlock”。

最后，在ajax成功中，从div中删除“displayBlock”类，然后放回“displayNone”以再次隐藏它。

希望有所帮助。

有些疑惑，请告诉我。

此致

Answer 2

您可以使用.done（）方法

$.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "ajax request completed" );
  })

Answer 3

如果您只需要更改行中的文本值，则可以在CSS中为每个完整行释放类值“display：none”，直到您准备好更新它为止。但是，您必须为每个ID或子计数方式设置一些唯一ID，以便在需要更新时再次找到该行。此外，您的表必须在没有这些行的情况下有效。

处理此问题的另一种方法是动态添加新行。如果你这样做，请记住DOM中不存在的行，直到你将它们插入那里，所以你以前不能引用它们。

Answer 4

如上所述，ajax有一些方法，比如之前和之后你有机会展示和隐藏你的元素。

<table>
    <thead>
    <tr><th>header 1</th><th>header2</th><th>header3</th><tr>
    <tr id="loadingrow"><th colspan=3>Loading Data...</th><tr>
    </thead>
    <tbody>....
$.ajax({
url: "http://fdafdas",
beforeSend: function(  ) {
  $('#loadingrow').show();
}
})
.done(function( data ) {
$('#loadingrow').hide();

 //load your data
}
});

隐藏表中的特定行，直到Ajax请求完成

4 个答案: