Question

除了Firefox之外，我在所有浏览器中都会遇到一个奇怪的问题。当我执行ajax请求并将数据附加到表格时，“显示更多”按钮会丢失其填充...

首次加载（非ajax）时，按钮会在所有浏览器中正常显示。当我单击Show more按钮发送请求以获取更多数据（行）时，按钮会丢失它的底部填充。

如果我打开Chrome或IE的开发工具并单击按钮的

或标记元素，它会返回填充。这几乎就像DOM需要刷新或触发显示填充的东西。

<!-- Html table -->
<div class="cont">
        <table id="table">
            <tbody>
                <tr>
                    <td>Record Data</td>
                </tr>
            </tbody>
        </table>
        <p><a id="showData"href="#">Show More</a></p>     
     </div> 

<!-- CSS -->
    #table { position: relative; width: 800px; height: 470px; overflow-y: scroll; padding: 10px;  }
    #showData { display: block; padding-top: 10px; }


 <!-- Event handler for Show more button -->
 <script type="text/javascript">
    $(function () {       
        $('#showData').click(function () {

            $.ajax({
                ...
                success: function (data) {                        
                    $('#table tbody').append(data.d.Html);
                },
            });

            return false;
        });
    });
</script>

返回数据

ajax调用只返回一堆表行。任何返回的html都没有类或id。

通过电话

返回的数据示例

<tr>
<td>some returned data 1</td>
</tr>
 <tr>
<td>some returned data 2</td>
</tr>
<tr>
<td>some returned data 3</td>
</tr>

Answer 1

尝试：

#showData {
    display: block;
    ...
}

你忘了关闭<p>：

<p><a id="showData" href="#">Show More</a></p> <!-- there! -->

Answer 2

“按钮失去了它的底部填充”......

您的CSS已将padding-bottom设置为0px。试着增加它？或者彻底删除它，以便它不会覆盖紧跟在它之前的10px中隐含的padding。

#showData { display: block; padding: 10px; padding-bottom: 0px; }

在JQuery Append之后设置样式

2 个答案: