js操作表格-根据多选框选择删除行、添加行、添加单元格、行的赋值

最新推荐文章于 2022-10-27 14:15:55 发布
最新推荐文章于 2022-10-27 14:15:55 发布
阅读量754 收藏 1
点赞数
分类专栏： javaScript 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/102998375
版权 
**表格根据多选框选择删除**

	获取每行的多选框，集合成一个数组，使用行号来删，遍历时每删除一行，
	则下一行的行号就会变成删除的那一行，而遍历的行号递增则删除不了之后的行
	所以每次删完，都使得行号i--，在从当前行开始遍历
	
		function choseDel(){
			//获取表格对象和行对象
				var ta=document.getElementById("ta");
			//获取获取要删除的行号
			var chks=document.getElementsByName("chk");
			//开始删除
			for(var i=0;i<chks.length;i++)
			{
				if(chks[i].checked)
				{
					ta.deleteRow(i);
					i--;
				}
			}
		}
	
	
**表格的添加行**
	表格对象.insertRow(行索引),返回值为添加的行对象,是空行
		ta.insertRow(1);  将添加的行至于，索引为1的位置
		
**添加单元格**

	行对象.insertCell(单元格索引);  返回值为一个单元格对象
		tr.insertCell(0);    在索引位置为0的地方添加一个单元格
		
**表格行的复制**

	将要复制的行的innerHTML赋值给新添加行的innerHTML
	配合多款框使用时，每遇到一次选择，就添加新行，并将选择行的内容赋值给新行
			function copyRow()
		{
			//获取表格对象
			var ta=document.getElementById("ta");

			var chks=document.getElementsByName("chk");
			for(var i=0;i<chks.length;i++)
			{
				//获取复制行对象
				if(chks[i].checked)
				{
					var tr=ta.insertRow(ta.rows.length);
					//复制行
					tr.innerHTML=ta.rows[i].innerHTML;
					changeColor();
				}
			}	
			
		}

代码示例：

<html>
	<head>
		<title>js 操作表格</title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			function delRow(btn)
			{
				var ta=document.getElementById("ta");
				var tr=btn.parentNode.parentNode;
				ta.deleteRow(tr.rowIndex);
			}
			
			/*修改*/
			function update(btn){
				//获取行对象
				var tr=btn.parentNode.parentNode;
				var cell=tr.cells[3];
				/*修改单元格内容*/
				//判断是否是数字，避免连续点击两次，单元格内容变成input标签源码
				if(!isNaN(Number(cell.innerHTML)))
				{cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' οnblur='updateRow2(this)'/>"; /*字符串的拼接*/
				
				}
				
				
			}
			/*失去焦点*/
			function updateRow2(inp){
				var cell=inp.parentNode;	
				cell.innerHTML=inp.value;
			}
			/*----------------------------------------------*/
			/*选择删除*/
			function choseDel(){
				//获取表格对象和行对象
					var ta=document.getElementById("ta");
				//获取获取要删除的行号
				var chks=document.getElementsByName("chk");
				//开始删除
				for(var i=1;i<chks.length;i++)
				{
					if(chks[i].checked)
					{
						ta.deleteRow(i);
						i--;
					}
				}
			}
			function addRow()
			{
				//获取表格对象
				var ta=document.getElementById("ta");
				//添加行
				var tr=ta.insertRow(1);
				//添加单元格
				var cell0=tr.insertCell(0);
				cell0.innerHTML="<input type='checkbox' name='chk' id='' value='' />";
				var cell1=tr.insertCell(1);
				cell1.innerHTML=document.getElementById("uname").value;
				var cell2=tr.insertCell(2);
				cell2.innerHTML="他";
				var cell3=tr.insertCell(3);
				cell3.innerHTML="20.00";
				var cell4=tr.insertCell(4);
				cell4.innerHTML="5";
				var cell5=tr.insertCell(5);
				cell5.align="center";
				cell5.innerHTML="<input type='button'  value='修改数量' οnclick='update(this)'/><input type='button'  value='删除' οnclick='delRow(this)'/>"
				changeColor();
			}
			/*复制行*/
			function copyRow()
			{
				//获取表格对象
				var ta=document.getElementById("ta");

				var chks=document.getElementsByName("chk");
				for(var i=0;i<chks.length;i++)
				{
					//获取复制行对象
					if(chks[i].checked)
					{
						var tr=ta.insertRow(ta.rows.length);
						//复制行
						tr.innerHTML=ta.rows[i].innerHTML;
						changeColor();
					}
				}	
				
			}
			
			/*全选和全不选*/
			function choseAll()
			{
				var chks=document.getElementsByName("chk");
				if(chks[0].checked)
				{
					for(var i=1;i<chks.length;i++)
					{
						chks[i].checked="checked";
					}
					
				}else{
						for(var i=1;i<chks.length;i++)
					{
						chks[i].checked=false;
					}
				}
			}
			
			/*隔行变色*/
			function changeColor()
			{
				var ta=document.getElementById("ta");
				var trs=ta.rows;
				for(var i=0;i<trs.length;i++)
				{
					if(i%2==0)
					{
						trs[i].style.backgroundColor="red";
					}else{
						trs[i].style.backgroundColor="green";
					}
				}
			}
		</script>
		<style type="text/css">
			#ta{
				margin:auto;
			}
			
			#ta tr{
				height:35px;

			}
			body{
				text-align:center;
			}
			
			
		</style>
	</head>
	<body>
		<input type="button" value="删除"  onclick="choseDel()"/>
		<input type="button" value="添加行" onclick="addRow()"/>
		<input type="button" value="复制行" onclick="copyRow()" />
		<input type="button" value="隔行变色" onclick="changeColor()" />
		添加的书名:<input type="text" name="uname" id="uname" value=""/>
		
		<hr />	
		<table border="1px" id="ta">
			<tr style="text-align: center; font-weight: bold;">
				<td><input type="checkbox" id="" name="chk"  onclick="choseAll()"/></td>
				<td width="200px">书名</td>
				<td width="100px">作者</td>
				<td width="100px">价格</td>
				<td width="100px">购买数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr  id="t1">
				<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
				<td>java</td>
				<td>我</td>
				<td>40.0</td>
				<td id="cell">3</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
				</td>
			</tr>
			<tr >
				<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
				<td>js</td>
				<td>gg</td>
				<td>77.60</td>
				<td>2</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量"onclick="update(this)" />
					<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="2" /></td>
				<td>Spring入门</td>
				<td>mm</td>
				<td>78.88</td>
				<td>300</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
		</table>
	</body>
</html>
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - Arco Design Vue 表格组件a-table“表格行数据中又嵌套了二维对象数组“，按平级循环渲染(嵌套数组视为同级行数据)， 对嵌套的数组循环展示为表格，智能合并行或列详细教程
王佳斌
07-02 1607
vue3，nuxt3，arco-design-vue，table表格组件，a-table，vue3 arco表格组件，平常都是数组中一个对象渲染成一行，每行中还有嵌套数组怎么办，每个行数据下还有一个数组怎么显示，怎么把表格相同的数据合并为一行，合并上下两行相同数据单元格，合并行或列如果遇到相同单元格就合并为一个，合并上下两行相同数据单元格，数据中有二维数组怎么遍历循环显示，表格数据带二级数组怎么循环渲染显示，表格数据中存在一个数组要怎么才能显示到表格，a-table表格合并详细教程示例，table表格如果对
vue+element-ui树形表格+复选框（实现复选框的各种效果）
Tony_ET的博客
01-25 4214
需求 项目的需求是给角色分配菜单，菜单会有子集，所以后台反给我的是带children的树形数据，但是添加的时候可能是一次性选很多的菜单，多选就不能直接用elemengt自带的多选，所以用了表格树形和复选框的组合，复选框用了插槽，完成了一些列的逻辑 代码块 表格部分 视图层 table中加入树形 :tree-props="{children: 'children'}" 插入两个复选框，一个是表头的，一个是表身<el-checkbox>绑定对应的v-model，还有对应的事件，后边写对应的逻辑 &l
js 实现 选中表格行前的复选框则行变色
03-31
js 实现 选中表格行前的复选框则行变色! 值得下载看看!资源免费,大家分享!!
js根据选中的复选框删除相应的table行
web开发自学
10-31 956
今天花了大半天的时间，就完成了这个东东的添加和删除功能，由于没注意细节，调试了我许久！ 单机 “添加”按钮，将会动态创建一个表格来呈现选择的人员数据，代码如下： //创建选中人员 private void CreateSelectNodeInfo() { if (al.Count &gt; 0) { ...
JavaScript：Select被选中的列表项变化时，改变表格的行数
weixin_41678597的博客
12-31 527
<strong>学历：</strong> <select size=1 style="width:200px;" onchange='f1(this)'> <option>本科</option> <option>硕士</option> </select><br><br> <table> <tr> <td>学位&lt...
Js操作表格-对表格单元格的添加删除修改
weixin_30505225的博客
01-05 63
动态表格 动态表格彻底研究 对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 5 55 5 6 6 6 56 777 7 77 7 ...
js 操作 表格 操作 常用方法
03-30
表格操作常用方法! 值得下载看看!资源免费,大家分享!!
Extjs 点击复选框在表格中增加相关信息行
11-26
首先，我们需要创建一个复选框组（CheckboxGroup）来显示可供选择的省份。在这个例子中，`$provinceCheckbox01`是一个复选框组，它通过监听`change`事件来响应用户的选择变化。 接下来，定义了一个名为`gridItems`...
el-checkbox实现月份选择变化，checked动态调整显示状态,动态改变多选框的选项问题，并且拿到选项值
最新发布
qq_41180882的博客
10-27 2090
在table表格中，再次进行月份遍历，下方有月份的table数组，由于月份后端返回代码，所以前端做了调整 ， @change这里的内容是当选择变化是触发函数，分别内容是，触发的内容，触发的本表格的遍历的月份，索引和对应的本行内容。方法：前端通过拿到的数据，寻找到本条数据的父级元素，再利用父级元素内的内容，来改变本行内容的数据 ，这里的obj就是选项找到的内容。在data中固定的数据，与后端做对应。
layui实现table添加行功能 table里有select可选择可编辑 并且与form表单一起提交数据保存
热门推荐
勤劳的搬运工
10-22 3万+
废话不多说 直接上代码 &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%@ include file="/WEB-INF/page/public/tag.jsp"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
复选框选中表格中的行进行删除行操作
04-29
复选框选中表格中的行进行删除行操作 复选框选中表格中的行进行删除行操作 复选框选中表格中的行进行删除行操作
js 实现 克隆表格
03-30
js 实现 克隆表格! 值得下载看看!资源免费,大家分享!!
jstable添加行删除行复制行
02-28
用js实现对table添加行、删除行、复制行的操作。
js表格的增加、修改、删除
weixin_34054931的博客
09-26 326
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content...
js实现多选删除
qq_43494108的博客
06-27 6154
使用js实现多选删除 谈谈多选删除 在我们实际生活中多选删除处处都有，比如在购物网站上已经加入购物车的商品，准备结算的时候发现有一部分的商品用不上，于是就把它们从购物车里移出，但是在移出之前要把要移出的商品前面的勾打上，然后再点击移出购物车才能把这些商品移除，接下来我就利用H5的checkbox和button标签再配合js来给大家演示下这个操作。 首先我们来看页面代码： <body> ...
JavaScript动态改变表格单元格内容的方法
weixin_34337265的博客
11-10 205
本文实例讲述了JavaScript动态改变表格单元格内容的方法。分享给大家供大家参考。具体如下： JavaScript动态改变表格单元格的内容，下面的代码通过修改单元格的innerHTML来修改单元格内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
js手动控制表格添加和删除
01-06 91
最近帮一个网友做一个ecshop显示颜色和相关商品id，故把后台添加表格的js代码共享，， js比较简单,可以在ie下运行，firefox无效... &lt;html&gt; &lt;head&gt; &lt;script&gt; function addRow(){ //添加一行 ...
JS删除复选框选中行
王世洪的博客
04-08 3263
在日常报表制作中，我们会时长遇到一些需要批量操作的功能，例如数据的批量删除，而此时往往跟复选框挂钩；一般是在报表中，我们可以通过复选框的形式进行勾选，然后通过按钮或者超链接触发JavaScript事件，获取复选框选中行，在进行一键删除。 接下来，就来讲解一下，如何通过获取复选框，获取选中行数据，进行一键删除行。 1、报表设计 本报表的应用是用于文件的上传和数据整理入库，此处示例多文件删除功能...
Jquery遍历获取/设置多选框checkbox的值
Champ.Ping的博客
06-16 2002
这里写自定义目录标题Jquery遍历获取/设置多选框checkbox的值 Jquery遍历获取/设置多选框checkbox的值 使用公司js集成的公共组件获取动态表单列表下的checkbox值时，只能获取到最后一个选中的值。为了解决这个问题，分析了checkbox属性，实现了遍历取值或赋值的方法。 如下，选中多个地市，只能获取到湘潭的值。 通过对表单数据对象的分析,单个复选框 checkbox对象的属性。 checkbox的属性放在context下，选中check值为true，选项值存在value中。
JS动态表格操作：添加、删除行及实时求和示例
在本文档中，我们将深入探讨如何通过JavaScript实现在网页表格中动态添加和删除行，以及利用`onkeyup`事件实时计算总和的功能。首先，让我们了解动态操作表格的基本概念。 动态添加和删除行在前端开发中是非常实用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值