使用jquery制作动态生成table,使用JQ实现全选,复选,全不选

本文介绍了如何使用jQuery创建动态表格，并实现全选、复选功能。通过监听输入框事件动态生成表格，同时提供全选按钮逻辑代码，当所有复选框被选中时，全选按钮自动勾选；反之，全选按钮取消选中。此外，还讲解了复选框逻辑，当单击一行时，会相应地改变复选框的状态，并更新全选按钮状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

本编主要讲解,使用JQ实现,table列表的动态生成,复选框的勾选状态,在复选框全部勾选后,全选按钮自动勾选, 如复选框没有全部选中,则全选框不会改变状态.

制作完成效果

初始效果

在这里插入图片描述
输入列数,生成table

生成Table效果

在这里插入图片描述

全选效果

在这里插入图片描述

复选效果

在这里插入图片描述

代码讲解

引入在线jquery

<!-- JQ动态引入 -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

添加一个input框,用来获取动态生成table的列数

<!-- input输入框 -->
<input type="text" id="input"  placeholder="请首先输入列数"  />

添加一个thead存放table标题行

(标题行固定,所以直接写,如果从数据库获取,直接使用${}来动态获取)

<!-- table写在最外边-->
<table class="table">
<!-- table标题列 -->
  <thead>
    <tr>
      <th scope="col"><input id="checkAll" name="checkAll" type="checkbox"/>全选</th>
      <th scope="col">序号</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

添加一个存放动态生成的table内容的容器

<!-- table生成容器 -->
  <tbody id="container">
  </tbody>
</table>
<!--/table结尾-->

书写动态生成table的JQ代码

注释:当input框的值改变后按下回车后执行此过程,

此过程通过循环拼接字符串tv实现.
当字符串拼接完毕后,执行.html()动态生成table,
生成完毕后才执行逻辑代码,如果不考虑执行顺序,有可能无法动态生成table

$("#container").html(tv);
其中$("#container")是容器.html()是方法tv是生成的html字符串

代码如下

$("#input").change(function(){
	var max = parseInt($("#input").val());
	var tv=""
	for(i=0;i<max+1;i++){
	tv+=tr;
	var tr = '<tr>'+
		'<td ><input id="check" name="check" type="checkbox" class="check"></td>'+
		' <th scope="row">'+i+'</th>'+
		'<td>Larry</td>'+
		' <td>the Bird</td>'+
		' <td>@twitter</td>'+
		'</tr>'
		
	}
		$("#container").html(tv);
		<!-- 生成table后,才能够执行后续操作 -->
		loand();
})

书写全选(全不选)按钮逻辑代码

首先是loand方法,这个是为了判断是否,table内容加载完毕,加载完毕后方可执行此过程内的代码.
考虑到用户选中复选框时单击一列,所以使用判断tr是否被单击,在这里没有考虑是点击复选框,
condition表示当前全选框的选中状态,状态只有选中和没选中,所以condition获取到状态后,只接遍历其他复选框按钮,并状态全部改变为condition一致.

代码如下

var loand=function(){
	//全选
	$("thead tr").on("click",function(){
		var condition=$("#checkAll").prop("checked");
		if(condition){
			$("#checkAll").prop("checked",false);
			condition=$("#checkAll").prop("checked");		
		}else{
			$("#checkAll").prop("checked",true);
			condition=$("#checkAll").prop("checked");
		}
		
		$("tbody").find("input").each(function(){
			$(this).prop("checked",condition);
		})
	});

书写其他复选框逻辑代码,并考虑全选框自动勾选

注解:

首先判断动态生成的tbody中是否tr被单击,如果被单击则改变状态
遍历tbody中的全部复选框,并记录选中的复选框数量,当选中数量登录tbody中复选框数量时,则改变全选框状态.使用数字记录选中数量是一个小技巧

	//复选框选择
	$("tbody tr").each(function (index, element) {
		$(element).on("click", function () {
		  var a = $(this).children().first().find("input").prop("checked");
		  var key=0;
		  if (a) {
			$(this).children().first().find("input").prop("checked", false);
		  } else {
			$(this).children().first().find("input").prop("checked", true);
		  }
		  
			$("tbody").find("input").each(function(){
				if($(this).prop("checked")){
					key++;
					if(key==$("tbody").find("input").length){
						$("#checkAll").prop("checked",true);
					}else{
						$("#checkAll").prop("checked",false);
					}
				}	
			})
		})	
	});

完整源代码

<!DOCTYPE html>
<html>
<head>
<!-- JQ动态引入 -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!-- bootstrap样式引入 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">


</head>
<body>
<!-- input输入框 -->
<input type="text" id="input"  placeholder="请首先输入列数"  />

<table class="table">
<!-- table标题列 -->
  <thead>
    <tr>
      <th scope="col"><input id="checkAll" name="checkAll" type="checkbox"/>全选</th>
      <th scope="col">序号</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
<!-- table生成容器 -->
  <tbody id="container">
  </tbody>
</table>
</body>

<script>
//动态生成table内容
$("#input").change(function(){
	var max = parseInt($("#input").val());
	var tv=""
	for(i=0;i<max+1;i++){
	tv+=tr;
	var tr = '<tr>'+
		'<td ><input id="check" name="check" type="checkbox" class="check"></td>'+
		' <th scope="row">'+i+'</th>'+
		'<td>Larry</td>'+
		' <td>the Bird</td>'+
		' <td>@twitter</td>'+
		'</tr>'
		
	}
		$("#container").html(tv);
		<!-- 生成table后,才能够执行后续操作 -->
		loand();
})

var loand=function(){
	//全选
	$("thead tr").on("click",function(){
		var condition=$("#checkAll").prop("checked");
		if(condition){
			$("#checkAll").prop("checked",false);
			condition=$("#checkAll").prop("checked");		
		}else{
			$("#checkAll").prop("checked",true);
			condition=$("#checkAll").prop("checked");
		}
		
		$("tbody").find("input").each(function(){
			$(this).prop("checked",condition);
		})
	});

	//复选框选择
	$("tbody tr").each(function (index, element) {
		$(element).on("click", function () {
		  var a = $(this).children().first().find("input").prop("checked");
		  var key=0;
		  if (a) {
			$(this).children().first().find("input").prop("checked", false);
		  } else {
			$(this).children().first().find("input").prop("checked", true);
		  }
		  
			$("tbody").find("input").each(function(){
				if($(this).prop("checked")){
					key++;
					if(key==$("tbody").find("input").length){
						$("#checkAll").prop("checked",true);
					}else{
						$("#checkAll").prop("checked",false);
					}
				}	
			})
		})	
	});
}
</script>
</html>