【随记】JQuery表头不动显示垂直滚动条的表格，全选反选框实现，双击可编辑综合

最新推荐文章于 2024-07-06 00:11:00 发布

九彩九色

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量719

点赞数

分类专栏： html 文章标签： javascript 表头不滚动 table 全选反选双击编辑

本文链接：https://blog.csdn.net/u010779363/article/details/45920271

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

具体思路：一个外围div里包含：

1.表头的div

2.表格体的div，带有滚动条，设定position: absolute.

<html>
<head>
<!-- 设定JQuery的路径 -->
<script src="../jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
<!--
 $(document).ready(function(){
	 $("#tables td").dblclick(function(){
		 //alert($(this).children(":input").length);
		 //alert($(this).children(":input").attr("type") != "checkbox");
		 if($(this).children(":input").attr("type") != "checkbox"){

			 /*使用宽度和高度之前要保证表格已设定了宽度和高度*/
				var height=$(this).height();
				var width=$(this).width();
				/* 不加这个判断会出错 */
				  if($(this).children(":input").length==0){
					  /* 如果td不处于可编辑状态就添加input使其可编辑  */
					  $(this).html("<input type='text' style='height:"+(height-4)+"px;width: "+(width-4)+"px;' value='"+$(this).text()+"'/>");
				  }
				  $(this).children(":input").focus();

				  $(this).children(":input").blur(function(){
					  /* 注意val()和attr("value")的区别 */
					   $(this).parent().html($(this).val()); 
					  });
			 }
		
		});
	 /* 判断内部表格是否超过div的宽度，如果超过就要将表头和表体的宽度减少来容纳滚动条 */
	 if($("#tables").height() + 40 >$(".alldiv").outerHeight()){
		    var width= $(".alldiv").width();
		    $(".tableheader").width(width-20);
		    $(".tablebody").width(width-20);
	 }
}); 

 function selectall(all){
	 if($(all).is(":checked")){
		 $('.tablebody input[type="checkbox"]').each(function(){
			    this.checked=true;
		 });
	 }else{
		 $('.tablebody input[type="checkbox"]').each(function(){
			    this.checked=false;
		 });  	    
	}
 }
	//-->
</script>
<style type="text/css">
.alldiv {
	height: 300px;
	width: 890px;
	overflow-x: hidden;
	overflow-y: auto;
	margin-top: 100px;
}

.tableheader {
	position: absolute;
	height: 40px;
	width: 890px;
	/* z-index: 0; */
	background-color: silver;
}

.tablebody {
	margin-top: 40px;
	/* height: 300px; */
	width: 890px;
	/* position: static; */
	/* z-index: -1; */
}


table {
	/* 注意，不设定这个会导致overflow不起作用 ,加上后还有一个好处就是当进度条消失后可以自动扩展宽度*/
	 width:100%;
	/* 防止自动换行 （不加这个我的zend studio自带的浏览器会自动换行)*/
	word-break : keep-all ;
	/* 实现强制不换行（不加这个我的chrome浏览器就会自动换行） */
	white-space: nowrap; 
	/* 设定表格固定布局输出 */
	table-layout: fixed;
	/* 边框单实线  */
	border-collapse: collapse;
	border: 1px solid black;
	text-align: center;
	
}

tr {
	height: 40px;
}
td,th{
	/* 列超出宽度时隐藏内容  */
	overflow: hidden;
	border: 1px solid black;
	/* width: 150px; */
}



</style>

</head>

<body οnlοad="setclick()">
	<div>
		<div>
			<div class="tableheader">

				<table>
					<colgroup>
					<!-- 总共宽度为870px 与div宽度相差20px主要用来放进度条，最后一行会自动调整宽度（表格width：100%） -->
						<col width="120px" />
						<col width="150px" />
						<col width="150px" />
						<col width="150px" />
						<col width="150px" />
						<col width="150px" />
					</colgroup>
					<tr>
						<th ><input type="checkbox" class="radioall"
							name="radioall" οnclick="selectall(this)" />全选 /反选</th>
						<th>表头第一列</th>
						<th>表头第二列</th>
						<th>表头第三列</th>
						<th>表头第四列</th>
						<th>表头第五列</th>
					</tr>
				</table>
			</div>
			<div class="alldiv">


				<div class="tablebody">

					<table id="tables" style="table-layout:fixed;">
						<colgroup>
							<col width="120px" />
							<col width="150px" />
							<col width="150px" />
							<col width="150px" />
							<col width="150px" />
							<col width="150px" />
						</colgroup>
						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td >第一行第一列用来测试超出宽度后是否会隐藏</td>
							<td>第一行第二列用来测试超出宽度后是否会隐藏</td>
							<td>第一行第三列用来测试超出宽度后是否会隐藏</td>
							<td>第一行第四列用来测试超出宽度后是否会隐藏</td>
							<td>第一行第五列用来测试超出宽度后是否会隐藏</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第二行第一列</td>
							<td>第二行第二列</td>
							<td>第二行第三列</td>
							<td>第二行第四列</td>
							<td>第二行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第三行第一列</td>
							<td>第三行第二列</td>
							<td>第三行第三列</td>
							<td>第三行第四列</td>
							<td>第三行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第四行第一列</td>
							<td>第四行第二列</td>
							<td>第四行第三列</td>
							<td>第四行第四列</td>
							<td>第四行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第五行第一列</td>
							<td>第五行第二列</td>
							<td>第五行第三列</td>
							<td>第五行第四列</td>
							<td>第五行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第六行第一列</td>
							<td>第六行第二列</td>
							<td>第六行第三列</td>
							<td>第六行第四列</td>
							<td>第六行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第七行第一列</td>
							<td>第七行第二列</td>
							<td>第七行第三列</td>
							<td>第七行第四列</td>
							<td>第七行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第八行第一列</td>
							<td>第八行第二列</td>
							<td>第八行第三列</td>
							<td>第八行第四列</td>
							<td>第八行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第九行第一列</td>
							<td>第九行第二列</td>
							<td>第九行第三列</td>
							<td>第九行第四列</td>
							<td>第九行第五列</td>
						</tr>

						<tr>
							<td ><input type="checkbox" name="checkboxs"></td>
							<td>第十行第一列</td>
							<td>第十行第二列</td>
							<td>第十行第三列</td>
							<td>第十行第四列</td>
							<td>第十行第五列</td>
						</tr>
					</table>


				</div>


			</div>
			

		</div>
	</div>

</body>
</html>

九彩九色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【随记】JQuery表头不动显示垂直滚动条的表格，全选反选框实现，双击可编辑综合

<!-- $(document).ready(function(){ $("#tables td").dblclick(function(){ /*使用宽度和高度之前要保证表格已设定了宽度和高度*/ var height=$(this).height(); var width=$(this).width(); if($(this).children(":i
复制链接

扫一扫