js实现表格的添加和删除
2016-07-08 13:03
309 查看
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="删除" onclick="delRow();" >
</td>
<td align="center" >
弹性预算规则：<input type="button" value="添加" onclick="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" onclick="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" onclick="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" onclick="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;
}
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="删除" onclick="delRow();" >
</td>
<td align="center" >
弹性预算规则：<input type="button" value="添加" onclick="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" onclick="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" onclick="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" onclick="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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Three.js(3) Camera
- json中注解@JsonProperty用法
- ExtJS环境搭建
- JavaScript学习笔记十六：generator
- JavaScript作用域
- AJAX嵌套获取数据的IDEA
- JavaScript arguments callee caller 学习笔记
- JS文件使用项目文件的时候，使用的定位最好是使用调用这个JS文件的页面文件的定位。
- 校验一个字符串是否是合法的JSON格式
- 构造json 数 进行遍历取出
- html （jsp ）表单元素总结
- [js]BOM篇
- JSP/Servlet编码导致乱码问题总结
- artTemplate--使用artTemplate时，由于json对象属性有数字命名格式 导致调用报错 syntax error
- javascript最佳实践
- JS常用操作方法
- javaScript input失去焦点自动保存事件
- JS的垃圾回收机制和内存分配
- JavaScript Location 对象
- 一步一步切入js插件开发