js中表格案例

最新推荐文章于 2024-05-16 16:52:30 发布

古城的风cll

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量7.1k

点赞数 1

分类专栏：前端技术文章标签： js表格

本文链接：https://blog.csdn.net/weixin_42458708/article/details/89962833

版权

前端技术专栏收录该内容

24 篇文章 0 订阅

订阅专栏

表格的全选和反选

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			margin-top: 20px;
		}
		tr{
			height: 30px;
		}
		td{
			width: 180px;
			text-align: center;
		}
		.ck{
			width: 30px;
		}
	</style>
</head>
<body>
	<button id='btn'>全选</button>
	<table border=1 cellspacing=0>
		<tr>
			<td class='ck'><input type="checkbox"></td>
			<td>《小王子》</td>
		</tr>
		<tr>
			<td class='ck'><input type="checkbox"></td>
			<td>《朝花夕拾》</td>
		</tr>
		<tr>
			<td class='ck'><input type="checkbox"></td>
			<td>《我在未来等你》</td>
		</tr>
		<tr>
			<td class='ck'><input type="checkbox"></td>
			<td>《如何想到又做到》</td>
		</tr>
	</table>

	<script>
		var btn = document.getElementById('btn');
		var input =document.querySelectorAll('input');
			var flag = true;
		btn.onclick = function(){

			var count=0;
			for(var i=0;i<input.length;i++){
					if(input[i].checked){
						count++;
					}
				}
			if(count==input.length){
				flag ==true;
			}else{
				flag ==false;
			}

			if(flag){
				for(var i=0;i<input.length;i++){
				input[i].checked = true;
				}
				this.innerText = '全不选';
				flag = false;
			}else{
				for(var i=0;i<input.length;i++){
				input[i].checked = false;
				}
				this.innerText = '全选';
				flag = true;
			}
			
		}
	</script>
	
</body>
</html>

动态创建和删除表格

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{
			border-collapse: collapse;
		}
		tr{
			
			height: 80px;
		}
		td{
			width: 180px;
			border: 1px solid red;
			
			text-align: center;
			line-height: 80px;
		}
	</style>
</head>
<body>
	行数:<input type="text" id='rows'>
	列数:<input type='text' id='cols'>
	<button id='btn'>创建表格</button>
	<div id='wrap'></div>

	<script src="public.js"></script>
	<script type="text/javascript">
		$('btn').onclick = function(){
			//每次创建表格之前清空之前的内容
			$('wrap').innerHTML ='';
			var rows = $('rows').value;
			var cols =$('cols').value;

			var table = document.createElement('table');
			for(var i=0;i<rows;i++){
				var tr = document.createElement('tr');
				for(var j=0;j<cols;j++){
					var td = document.createElement('td');
					tr.appendChild(td);
				}
				//追加一列删除
				var del = document.createElement('td');
				del.innerHTML = "<a href='javascript:;'>删除</a>"
				tr.appendChild(del)
				table.appendChild(tr);

				//为'删除列添加点击事件'
				var a = table.querySelectorAll('a');
				for(var i=0;i<a.length;i++){
					a[i].onclick = function(){
						if(confirm('确认要删除吗？'))
						this.parentNode.parentNode.remove();
					}
				}
			}
			$('wrap').appendChild(table);
		}
	</script>
</body>
</html>

古城的风cll

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js中表格案例

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> table{ margin-top: 20px; } tr{ height: 30px; }...
复制链接

扫一扫