DANCE WITH JAVA

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

js中实现table的插入、修改、删除

进来工作慢慢远离web、远离js,看着自己这些年来学习过程中写过的上百个的js demo,感觉还是把它们发上来吧。虽然它们不够完善,但对于js初学者还是比较有用的。整理一下慢慢发上来,算是留念吧。

好了,第一从table开始吧
就是上边是一个表,下边是一些录入控件text ,select
实现了:插入 ,删除,修改,读取,验证类型唯一性(每种类型只能输入一个记录)
文中的内容直接存成html就能看到效果,所以我就不贴图片了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
    
var flg=false;
    
var selectedColor = "#99CCCC";
    
var initColor = "#ffff99";
    
var selectedRowIndex = "";
    
var editObj;
    
function add(){
        
var cell;
        
var textNode;
        
// add head
        var type = document.getElementsByName("type")[0];
        head 
= type.options[type.selectedIndex].text;
        
//check exist
        var hiddenHeads = document.getElementsByName("hiddenHead");
        
for(i=0;i<hiddenHeads.length;i++){
            
if(hiddenHeads[i].value == type.value){
                alert(
"这个类型的记录已经存在");
                
return ;
            }

        }

        
//add row
        tbl = document.getElementById("paramTbl");
        rowsLen 
= tbl.rows.length;
        row 
= tbl.insertRow(rowsLen);        
        
        
//create head tag
        textNode = document.createTextNode(head);        
        cell 
= row.insertCell(0)
        cell.setAttribute(
"hight","22");
        cell.appendChild(textNode);        
        row.appendChild(cell);        
        
//add param tag
        for(i=1;i<4;i++){            
            paramValue 
= document.getElementsByName("param"+i)[0].value;
            textNode 
= document.createTextNode(paramValue);            
            cell 
= row.insertCell(i)
            cell.setAttribute(
"hight","22");
            cell.appendChild(textNode);
            row.appendChild(cell);             
        }

        
//add head value
        hiddenHead = document.createElement("<input type='hidden' name='hiddenHead' value='"+type.value+"'/>");        
        cell 
= row.insertCell(4)        
        cell.setAttribute(
"hight","22");
        cell.appendChild(hiddenHead);
        row.appendChild(cell);
        
//add param value
        for(i=5;i<8;i++){
            paramValue 
= document.getElementsByName("param"+(i-4))[0].value;
            hidden 
= document.createElement("<input type='hidden' name='hiddenParam"+(i-4)+"' value='"+paramValue+"'/>");
            cell 
= row.insertCell(i)
            cell.style.display
='none';
            cell.appendChild(hidden);
            row.appendChild(cell);   
        }


        row.onclick
=function(){rowClick(this);};
        row.bgColor 
= initColor;
        init();
    }

    
function edit(){
        tbl 
= document.getElementById("paramTbl");
        
if(selectedRowIndex==""){
            alert(
"please select a row");
            
return ;
        }

        
for(i=1;i<4;i++){
            paramObj 
= document.getElementsByName("param"+i)[0];
            hiddenObj 
= document.getElementsByName("hiddenParam"+i)[selectedRowIndex-1];
            hiddenObj.value 
= paramObj.value;
            editObj.cells[i].innerText
=paramObj.value;
        }

        init();
    }

    
function del(){
        tbl 
= document.getElementById("paramTbl");
        tbl.deleteRow(selectedRowIndex);
        selectedRowIndex 
= "";
        init();

    }

    
function rowClick(obj){
        tbl 
= document.getElementById("paramTbl");
        
if(selectedRowIndex != ""){
            tbl.rows[selectedRowIndex].bgColor 
= initColor;
        }

        selectedRowIndex 
= obj.rowIndex;
        obj.bgColor 
= selectedColor;
        
//reset select 
        var type = document.getElementsByName("type")[0];
        
var hiddenHead = document.getElementsByName("hiddenHead")[selectedRowIndex-1];        
        
var opts = type.options;
        
if(flg){
        alert(selectedRowIndex
-1);
        alert(hiddenHead);
        alert(hiddenHead.value);
        }

        
for(i=0;i<opts.length;i++){    
            
if(opts[i].value == hiddenHead.value ){
                opts[i].selected 
= true;
            }

        }

        
//copy param value
        for(i=1;i<4;i++){
            paramObj 
= document.getElementsByName("param"+i)[0];
            hiddenObj 
= document.getElementsByName("hiddenParam"+i)[selectedRowIndex-1];            
            paramObj.value 
= hiddenObj.value;
            
//alert(hiddenObj.value);
        }

        editObj
=obj;
    }

    
function init(){
        
for(i=1;i<4;i++){            
            param 
= document.getElementsByName("param"+i)[0];
            param.value
="";
        }

        
var type = document.getElementsByName("type")[0];
        type.options[
0].selected=true;
    }

    
function test(){
        
        hiddenObjs 
= document.getElementsByName("hiddenParam1")
        
for(i=0;i<hiddenObjs.length;i++){
            alert(hiddenObjs[i].value);
        }

        
var hiddenHeads = document.getElementsByName("hiddenHead");    
        
for(i=0;i<hiddenHeads.length;i++){
            alert(hiddenHeads[i].value);
        }

    }

    
function test2(){
        
if(flg){
            flg
=false;
        }
else{
            flg
=true;
        }

    }

    
function reset(){
        tbl 
= document.getElementById("paramTbl");
        
if(selectedRowIndex!=""){
            tbl.rows[selectedRowIndex].bgColor 
= initColor;
            selectedRowIndex
="";
        }

        
for(i=1;i<4;i++){            
            param 
= document.getElementsByName("param"+i)[0];
            param.value
="";
        }

    }


</script>
<BODY>
    
<div style="height:132px; width:100%; overflow-x:auto; overflow-y:auto; background-color:#ffff99;" >
    
<table id="paramTbl" width="100%">
        
<tr>
            
<td>类型</td>
            
<td>参数1</td>
            
<td>参数二</td>
            
<td>参数三</td>
        
</tr>
    
</table>
    
</div>
    
<table>
        
<tr>
            
<td>
                
<select name="type" onchange="reset()">
                    
<option value="typeA">类型A</option>
                    
<option value="typeB">类型B</option>
                
</select>
            
</td>
            
<td>
                
<input type="text" name="param1"/>
            
</td>
            
<td>
                
<input type="text" name="param2"/>
            
</td>
            
<td>
                
<input type="text" name="param3"/>
            
</td>
        
</tr>
        
<tr>
            
<td><input type="button" onclick="add()" value="add"/></td>
            
<td><input type="button" onclick="edit()" value="edit"/></td>
            
<td><input type="button" onclick="del()" value="del"/></td>
            
<td><!--<input type="button" onclick="test()" value="test"/>--></td>
        
</tr>
    
</table>
    
<!--
<td><input type="button" onclick="test2()" value="test2"/></td>
<td><input type="button" onclick="alert(selectedRowIndex)" value="test2"/></td>
-->
</BODY>
</HTML>

posted on 2007-09-10 15:24 dreamstone 阅读(9922) 评论(4)  编辑  收藏 所属分类: 片段脚本语言javascript

评论

# re: js中实现table的插入、修改、删除 2008-10-25 00:39 vvd

不错哦  回复  更多评论   

# re: js中实现table的插入、修改、删除 2010-08-10 10:44 ss

ok  回复  更多评论   

# re: js中实现table的插入、修改、删除 2011-09-07 18:30 http://www.blogjava.net/Modules/CaptchaImage/JpegI

http://www.blogjava.net/Modules/CaptchaImage/JpegImage.aspx?cacheid=20110907180946http://www.blogjava.net/Modules/CaptchaImage/JpegImage.aspx?cacheid=20110907180946  回复  更多评论   

# re: js中实现table的插入、修改、删除 2011-09-07 18:30 http://www.blogjava.net/Modules/CaptchaImage/JpegI

http://www.blogjava.net/Modules/CaptchaImage/JpegImage.aspx?cacheid=20110907180949  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: