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

朱雀 2021-07-24 15:21 615阅读 0赞

**表格根据多选框选择删除**
    
    	获取每行的多选框，集合成一个数组，使用行号来删，遍历时每删除一行，
    	则下一行的行号就会变成删除的那一行，而遍历的行号递增则删除不了之后的行
    	所以每次删完，都使得行号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>