js实现表格的添加和删除

最新推荐文章于 2022-09-12 11:41:02 发布

mischen520

最新推荐文章于 2022-09-12 11:41:02 发布

阅读量812

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/miachen520/article/details/51860074

版权

javascript 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

js实现表格的添加和删除

HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Untitled Document</title>
		<script src="util.js"></script>

	</head>
	<body>
		<table  width="100%" height="100%"  border = "1"    >
			<tr>
				<td align="center"  >
					<input type="button"  value="删除"   οnclick="delRow();"  >
				</td>
				<td align="center"  >
					弹性预算规则：<input type="button"  value="添加"  οnclick="addRow();"    >
				</td>
			</tr>
			<tr>
				<table   id="table1" width="100%" height="100%"  border = "1"  >
					<tr id="tr0" >
						<td align="center"  > 
						</td>
						<th align="center"  >编码</th>
						<th align="center"  >弹性计算规则</th>	
						<th align="center"  >摘要</th>
						<th align="center"  >参数</th>
						<th align="center"  >说明</th>
					</tr>
					<tr  id="tr1">
						<td align="center"  >
							<input type="checkbox"   name="cb1" value="111"  οnclick="chaValue(this);" >
						</td>
						<td align="center"  >111</td>
						<td align="center"  >按人均标准求和</td>	
						<td align="center"  >办公用品人月每月10元</td>
						<td align="center"  >com.bjsxt.test</td>
						<td align="center"  >办公用品预算科目弹性预算</td>
					</tr>
					<tr  id="tr2">
						<td align="center"  >
							<input type="checkbox"  name="cb1" value="112"  οnclick="chaValue(this);"  >
						</td>
						<td align="center"  >112</td>
						<td align="center"  >按人均标准求差</td>	
						<td align="center"  >办公用品人月每月1000元</td>
						<td align="center"  >com.bjsxt.test</td>
						<td align="center"  >办公用品预算科目弹性预算</td>
					</tr>
				</table>		
			</tr>		
		</table>
	</body>
</html>
<script>
	//获取表格对象
	var table1=$("#table1");
	//在表格后添加一行 ，第一列是checkbox，后面是空
	function addRow(){

		//创建新的一行
		var newTr=table1.insertRow(table1.rows.length);
		//用来装新的列元素
		var newTds=[];
		//添加每一列  并装在列元素的数组里面
		for(var i=0;i<6;i++){
			var newTd=newTr.insertCell(i);
			//给列元素设置居中
			newTd.align="center";
			newTds.push(newTd);
		}
		//给第一列 设置为 一个checkbox 元素  结构同之前的
		newTds[0].innerHTML='<input type="checkbox"   name="cb1" value="111"  οnclick="chaValue(this);" >';
	}
	//删除选中的行元素
	function delRow(){
		//获取所有的checkbox
		var checks=$("cb1");
		//遍历所有的checkbox  找到选中的  并且删除该行
		for(var i=0;i<checks.length;i++){
			if(checks[i].checked){
				//找到所在的  行元素tr
				var tr=checks[i].parentNode.parentNode;
				//删除该行   tr.rowIndex 是行元素 所在下标
				table1.deleteRow(tr.rowIndex);
				i--;//因为前面的行 删除了  所有的行元素 下标  往前移了1位  所有i--
			}
		}
	}
	//如果选中  可以更改  文本的值   如果不选中  锁定文本的值
	function chaValue(obj){
		//判断checkbox 是否选中
		if(obj.checked){
			//找到checkbox所在的tr
			var parentTr=obj.parentNode.parentNode;
			for(var i=1;i<parentTr.cells.length;i++){
				//获取成为文本框之前  td内的 内容
				var innerValue=parentTr.cells[i].innerHTML;
				parentTr.cells[i].innerHTML='<input type="text" value="'+innerValue+'"/>';
			}
		}else{
			//找到checkbox所在的tr
			var parentTr=obj.parentNode.parentNode;
			for(var i=1;i<parentTr.cells.length;i++){
				//拿到td中的 input 标签的值
				var inputValue=getFirstChild(parentTr.cells[i]).value;
				//给对应td标签 设置值
				parentTr.cells[i].innerHTML=inputValue;
			}
		}
	}
</script>

js代码：

/**
 *
 * @param idOrName  如果传入id  前面加上#   如果传入name  直接传入
 * @returns {*}  返回元素节点  如果没找到 返回null
 */
function $(idOrName){
    var obj=null;
    if(idOrName){
        if(idOrName.charAt(0)=="#"){
            obj=document.getElementById(idOrName.substring(1));
        }else{
            obj=document.getElementsByName(idOrName);
        }
    }
    return obj;
}
/**
 *
 * @param parentNode  父节点
 * @returns {Array}  所有的元素子节点
 */
function getChildNodes(parentNode){
    var childs=parentNode.childNodes;
    var newChilds=[];
    for(var i=0;i<childs.length;i++){
        if(childs[i].nodeType==1){
            newChilds.push(childs[i]);
        }
    }
    return newChilds;
}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   第一个元素节点
 */
function getFirstChild(parentNode){
    var firstChild=parentNode.firstChild;
    if(firstChild.nodeType==3){
        firstChild=firstChild.nextSibling;
    }
    return firstChild;

}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   最后一个元素节点
 */
function getLastChild(parentNode){
    var lastChild=parentNode.lastChild;
    if(lastChild.nodeType==3){
        lastChild=lastChild.previousSibling;
    }
    return lastChild;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回下一个兄弟元素节点
 */
function getNextSibling(node){
    var nextNode=node.nextSibling;
    if(nextNode.nodeType==3){
        nextNode=nextNode.nextSibling;
    }
    return nextNode;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回前一个兄弟元素节点
 */
function getPreviousSibling(node){
    var preNode=node.previousSibling;
    if(preNode.nodeType==3){
        preNode=preNode.previousSibling;
    }
    return preNode;
}