js实现表格添加数据
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="util.js"></script>
<script>
function add(){
var tab=$("#tab");
var userId=$("#userId").value;
var userName=$("#userName").value;
var userAge=$("#userAge").value;
var newTr=tab.insertRow(1);
var idTd=newTr.insertCell(0);
var nameTd=newTr.insertCell(1);
var genderTd=newTr.insertCell(2);
idTd.innerHTML=userId;
nameTd.innerHTML=userName;
genderTd.innerHTML=userAge;
}
function del(){
var tab=$("#tab");
tab.deleteRow(1);
}
</script>
</head>
<body>
<table border="1px" id="tab">
<tr id="tr1">
<th width="250px">编号</th>
<th width="250px">姓名</th>
<th width="250px">性别</th>
</tr>
<tr id="tr2">
<th width="250px">1</th>
<th width="250px">zzzz</th>
<th width="250px">男</th>
</tr>
</table>
<div style="text-align: center">
编号:<input type="text" id="userId" />
姓名:<input type="text" id="userName" />
年龄:<input type="text" id="userAge" />
</div>
<input type="button" value="添加" οnclick="add()" />
<input type="button" value="删除" οnclick="del()" />
</body>
</html>
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;
}