欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

表(table)单(list)等数据显示底部跳转到XX页和每页显示多少数据HTML代码

程序员文章站 2022-06-08 18:27:36
...

很多时候我们想要下面这种效果图,我在这里提供一种HTML的代码方式,由于大家的后端语言不同,我就不提供后台代码了。

表(table)单(list)等数据显示底部跳转到XX页和每页显示多少数据HTML代码

<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
	<tbody><tr>
		<td height="23" align="center" class="Space" colspan="18">
			<table align="center" cellspacing="1" cellpadding="1" border="0" width="100%" style="Zt_Wdtdfy">
				<tbody><tr>
					<td align="right">
						<div class="GD_PAGE_LIST">
<div class="GD_PAGES"><p>每页显示:</p>
<span class="on"> <a onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',0,10); return false;" href="javascript:;">10</a></span><span class="over"> <a onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',0,20); return false;" href="javascript:;">20</a></span><span class="over"> <a onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',0,30); return false;" href="javascript:;">30</a></span>
</div>
<div class="GD_PAGECOUNT">
<span>首页</span>
<span>上一页</span>

<span>下一页</span><span>尾页</span>
共0条记录

到第<input type="text" class="GD_PAGECOUNTtext" value="0" size="3" name="cur_page_no">页 <input type="button" class="GD_PAGECOUNTbt" size="3" value="确定" style="cursor:hand" onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',document.queryDeliveryOrderBuyForm.cur_page_no.value,10)">
</div>
</div>

					</td>
				</tr>
			</tbody></table>
		</td>
	</tr>
</tbody></table>

我解释一下吧:红色粗线的部分是一个table,和具体的数据表(马赛克所在的表)是并列在一个父级DIV里面;A,B部分是table的tr(td),里面又嵌套了一个div,里面就是点击事件了,然后往后台穿参数。