JS—Table中添加、删除行

最新推荐文章于 2022-11-19 09:22:57 发布

zbzhangzi

最新推荐文章于 2022-11-19 09:22:57 发布

阅读量98

点赞数

分类专栏： JavaScript 文章标签： CSS HTML JavaScript ViewUI

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

//全局变量
		var trId = 1;
		
		//添加一行
		function addTr(){
			var content		= document.getElementById("content");
			var selectId	= document.getElementById("selectId");
			var myform = document.getElementById("myform");
			
			if(selectId.value == 0){				
				alert("请重新选择！");
				return;
			}
			if(content.value == ""){
				alert("内容不能为空！");
				return;
			}
			
			//判断重复添加被选中的 项
			for(var i = 0; i < myform.elements.length; i++){
				//每个元素
				var element = myform.elements[i];				
				if (element.id == "getSelectId" && element.type=="hidden"){
					//被选中下拉项的值==表单中某元素的值
					if(selectId.value == element.value) {
						//selectId.options[selectId.selectedIndex].text: 被选中下拉项的文本名称(如:测试1)
						alert(selectId.options[selectId.selectedIndex].text+"不能重复添加！");
						return;
					}
				}
			}
			//获得表格
			var tab = document.getElementById("tab");
			//添加一行
			//参数-1指在最下的位置添加
			//但是w3school上说:若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
			//实际上为-1时并没报异常
			//参数为0: 往上添加,-1或tab.rows.length(行数): 往下添加
			var newTr = tab.insertRow(-1);				  
			//给此行设置id属性,便于管理(删除) trId: 上面声明的全局变量默认值 1						
			newTr.id = "tr_" + trId;
			//添加三列
			var newTdName		= newTr.insertCell(0);		//第一列
			var newTdContent	= newTr.insertCell(1);		//第二列
			var newTdCaoZuo 	= newTr.insertCell(2);		//第三列						        
			//设置三列的数据  
			newTdName.innerHTML		= selectId.value + "----" + selectId.options[selectId.selectedIndex].text + "<input id='getSelectId' name='getSelectId' type='hidden' value='"+selectId.value+"'>";
			newTdContent.innerHTML 	= "<textarea rows='5' cols='40'name='getContent' id='getContent'>" + content.value + "</textarea>";
			newTdCaoZuo.innerHTML 	= "<input type='button' οnclick='moveTr("+trId+")' value='移除'>";
			//添加后,把下面的文本域中的内容清空			
			content.value = "";
			trId++;
		}
		//删除一行
		function moveTr(getTrId){
			//获得表格
			var tab = document.getElementById("tab");
		    //根据id获得将要删除行的对象
		    var tr = document.getElementById("tr_" + getTrId);
		    //取出行的索引，设置删除行的索引
		    //alert(getTrId+"---"+tr.rowIndex);
		    tab.deleteRow(tr.rowIndex);
		}
		//一次性全部删除
		function moveAllTr(){
			var tab = document.getElementById("tab");
			//该表格的行数
			var rowlen = tab.rows.length;
			//deleteRow()方法的参数是行的索引(从0开始)
			//如: 表格为4行,索引以此为0,1,2,3;
			//以下是从下往上删除,故删除时 行数-1开始,0,1行不删除,所以rowIndex > 1
			for(var rowIndex = rowlen - 1; rowIndex > 1; rowIndex--){				
        		tab.deleteRow(rowIndex);
   	 		}
		}
		//提交
		function checkSubmit(){
			var getContent = document.getElementById("getContent");
			if(getContent != null){	//该控件不为空时
				if(getContent.value == ""){
					alert("内容不能为空！");
					return;				
				}
			}
			var myform = document.getElementById("myform");
			myform.submit();
		}

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>table.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="table.js"></script>
  </head>
  
  <body>
    
    <form id="myform" action="#" method="post">
    <table id="tab" width="50%" align="center" border="1">
    	<tr>
    		<td colspan="3">
    			JS添加删除行操作
    			<input type="button" value="全部移除" οnclick="moveAllTr()">
    			<input type="button" value="提交" οnclick="checkSubmit()"> 
    		</td>
    	</tr>
    	<tr align="center">
    		<td>被选中的名字</td>
    		<td >输入的内容</td>
    		<td >操作</td>
    	</tr>
    	<tr id="tr_901">
    		<td>测试</td>
    		<td>
    			<textarea rows="5" cols="40" id="getContent">测试内容测试内容测试内容</textarea>
    		</td>
    		<td><input type="button" value="移除" οnclick="moveTr(901)"></td><!-- 注意这里的参数901 此参数不能以0开头 -->
    	</tr>    	
    </table>
    </form>
    
    <table  width="50%" align="center" border="1">
    	<tr>
    		<td>
    			<select id="selectId">
    				<option value="0">请选择</option>
    				<option value="1">测试11</option>
    				<option value="2">测试22</option>
    				<option value="3">测试33</option>
    				<option value="4">测试44</option>
    			</select>
    			<input type="button" id="btn" οnclick="addTr()" value="添加">
    		</td>    		
    	</tr>
    	<tr>
    		<td>
    			<textarea rows="5" cols="40" id="content"></textarea>
    		</td>
    	</tr>
    </table>    
    
  </body>
</html>

——————————————————————————The End———————————————————————