JavaScript：前台控制增删改

听雨恋剑

  //表结构：第一列只有一个，第二列有2个，第三列有1个
//增加后的名字为：addname,addremark，在doadd()中修改
//修改后的名字为:updatename,updateid,updateremark,在doupdate中修改
//删除后的名字为deleteid
//表单名为form1
//几个按扭为：
//<INPUT onclick=javascript:tb_addnew() type=button value=新增 name=addBtn>
//<INPUT onclick=javascript:tb_delete() type=button value=删除 name=deleteBtn>
//<INPUT onclick=javascript:tb_update() type=button value=更新 name=updateBtn>
//<INPUT onclick=javascript:tb_submit() type=button value=提交 name=submitBtn>
// <INPUT onclick=javascriptkdo() type=button value=完成 name=okBtn>
//<INPUT onclick=javascript:cancledo() type=button value=取消 name=cancleBtn>
//

//用来临时保存一行内的内容
tmp1=""
tmp2=""
tmp3=""
tmp4=""
//用来保存动作update,add,none
actionFlag="none"
//保存是否已有一项成功
changerRows=0
//临时保存一行
rowNum=-1
function tb_submit(){
      var ls_r=document.all("mytable").rows
      for(var i=1;i<ls_r.length;i++){
             ls_r(i).cells(1).children(0).disabled=false
             ls_r(i).cells(1).children(1).disabled=false
             ls_r(i).cells(2).children(0).disabled=false
               ls_r(i).cells(3).children(0).disabled=false
             ls_r(i).cells(4).children(0).disabled=false
      }
      userForm.submit()
}

function tb_addnew()
{
showOKCancle()

actionFlag="add"

var ls_t=document.all("mytable")
mynewrow = ls_t.insertRow();

mynewcell=mynewrow.insertCell();
mynewcell.innerHTML="<input type='radio' name='select'>"
mynewcell.children(0).checked=true

mynewcell=mynewrow.insertCell();
mynewcell.innerHTML="<input type='text'><input type='hidden' name=''>"

mynewcell=mynewrow.insertCell();
mynewcell.innerHTML="<input type='text'><input type='hidden' name=''>"

mynewcell=mynewrow.insertCell();
mynewcell.innerHTML="<input type='text'>"

mynewcell=mynewrow.insertCell();
mynewcell.innerHTML="<select name=''><option value='1' >是</option><option value='0' >否</option></select>"

rowNum=ls_t.rows.length-1

}

function tb_delete(){
      if(confirm("你确定要删除这一条记录吗")){
             var tempRow=getRow()
             if(tempRow!=null){
                    if(tempRow.cells(1).children(0).name=="addtaskid"){
                           changerRows=changerRows-1
                           cancleAdd()
                    }else if(tempRow.cells(1).children(0).name==""){
                                if(tempRow.cells(2).children(1).value!="100"){
                                   alert("不是新任务，不能删除！")
                               }
                               else{
                           changerRows=changerRows+1
                           tempRow.style.display="none"
                           tempRow.cells(1).children(1).name="deleteid"
                                 }
                    }
                       else{
                           tempRow.style.display="none"
                           tempRow.cells(1).children(1).name="deleteid"
                           tempRow.cells(1).children(0).name=""
                           tempRow.cells(2).children(0).name=""
                               tempRow.cells(3).children(0).name=""
                           tempRow.cells(4).children(0).name=""
                    }

                    showInit()
             }

      }
}
//从更新按扭进入
//选中的那行的记录可编辑，并保存其数值
function tb_update()
{
      var tempRow=getRow()
      if(tempRow!=null){
                    showOKCancle()
                    tempRow.cells(1).children(0).disabled=false
                    tempRow.cells(2).children(0).disabled=false
                       tempRow.cells(3).children(0).disabled=false
                       tempRow.cells(4).children(0).disabled=false
                    tmp1=tempRow.cells(1).children(0).value
                    tmp2=tempRow.cells(2).children(0).value
                       tmp3=tempRow.cells(3).children(0).value
                       tmp4=tempRow.cells(4).children(0).value

                       var tmpSelect=tempRow.cells(4).children(0)
                       tmpSelect.length=0
                       tmpSelect.options[tmpSelect.length]=new Option("是","1")
                    tmpSelect.options[tmpSelect.length]=new Option("否","0")
                       tempRow.cells(4).children(0).value=tmp4

                    actionFlag="update"

      }else{
                    alert("请选择一个记录")
             }
}
function okdo(){
      if(checkOK()){

             if(actionFlag=="update")
                    doUpdate()
             else if(actionFlag=="add")
                    doAdd()
             showInit();
             actionFlag="none"
      }

}

function checkOK(){
flag=true
var tmpRow=document.all("mytable").rows(rowNum)
if((tmpRow.cells(1).children(0).value=="")||(tmpRow.cells(2).children(0).value=="")
  ||(tmpRow.cells(3).children(0).value=="")){
      alert("null")
      flag=false
}

return flag
}



function doUpdate(){
      var tmpRow=document.all("mytable").rows(rowNum)
      tmpRow.cells(1).children(0).disabled=true
      tmpRow.cells(2).children(0).disabled=true
            tmpRow.cells(3).children(0).disabled=true
      tmpRow.cells(4).children(0).disabled=true
      if(tmpRow.cells(1).children(0).name!="addtaskid"){
             changerRows=changerRows+1
             tmpRow.cells(4).innerHTML=tmpRow.cells(4).innerHTML+"(已更新)"
             tmpRow.cells(1).children(0).name="updatetaskid"
             tmpRow.cells(1).children(1).name="updateid"
             tmpRow.cells(2).children(0).name="updatetaskname"
               tmpRow.cells(3).children(0).name="updatetaskdesc"
               tmpRow.cells(4).children(0).name="updatetaskcolla"
      }

      rowNum=-1
}
function doAdd(){
      var tmpRow=document.all("mytable").rows(rowNum)
      tmpRow.cells(1).children(0).disabled=true
      tmpRow.cells(2).children(0).disabled=true
       tmpRow.cells(3).children(0).disabled=true
       tmpRow.cells(4).children(0).disabled=true
      tmpRow.cells(4).innerHTML=tmpRow.cells(4).innerHTML+"(新加的)"
      tmpRow.cells(1).children(0).name="addtaskid"
      tmpRow.cells(2).children(0).name="addtaskname"
       tmpRow.cells(3).children(0).name="addtaskdesc"
      tmpRow.cells(4).children(0).name="addtaskcolla"
      changerRows=changerRows+1
      rowNum=-1
}
function cancledo(){

      showInit();
      alert(actionFlag+" cancle")
      if(actionFlag=="update")
             cancleUpdate()
      else if(actionFlag=="add")
             cancleAdd()

      actionFlag="none"

}
function cancleUpdate(){
                    var tmpRow=document.all("mytable").rows(rowNum)
                    tmpRow.cells(1).children(0).disabled=true
                    tmpRow.cells(2).children(0).disabled=true
                            tmpRow.cells(3).children(0).disabled=true
                    tmpRow.cells(4).children(0).disabled=true
                    tmpRow.cells(1).children(0).value=tmp1
                    tmpRow.cells(2).children(0).value=tmp2
                       tmpRow.cells(3).children(0).value=tmp3
                    tmpRow.cells(4).children(0).value=tmp4
                    tmpRow=null
}
function cancleAdd(){
                    var ls_t=document.all("mytable")
                    ls_t.deleteRow(rowNum)
                    rowNum=-1
}

//将其他的按扭隐藏，只显示okcancle
function showOKCancle(){
                    document.all("updateBtn").style.display="none"
                    document.all("submitBtn").style.display="none"
                    document.all("addBtn").style.display="none"
                    document.all("deleteBtn").style.display="none"
                    document.all("okBtn").style.display="block"
                    document.all("cancleBtn").style.display="block"

}
//按扭初始化
function showInit(){
                    if(changerRows>0)
                           document.all("submitBtn").style.display="block"
                    else
                           document.all("submitBtn").style.display="none"


                    document.all("updateBtn").style.display="block"
                    document.all("addBtn").style.display="block"
                    document.all("deleteBtn").style.display="block"
                    document.all("okBtn").style.display="none"
                    document.all("cancleBtn").style.display="none"
}
function getRow(){
var ls_r=document.all("mytable").rows
for(var i=1;i<ls_r.length;i++){
      if(ls_r(i).cells(0).children(0).checked){
             rowNum=i
             return ls_r(i)
      }
}

}


///////////////////////////////////////////////////////////////////////////////////////////////////
JSP页面调用方法：

</table>
<br>
  <table align="center">
  <tr>
   <td><input type='button' name ="addBtn" value="新增" onclick="javascript:tb_addnew()"></td>
   <td><input type='button'  name ="deleteBtn" value="删除" onclick="javascript:tb_delete()"></td>
   <td><input type='button'  name ="updateBtn" value="更新" onclick="javascript:tb_update()"></td>
   <td><input type='button'  name ="submitBtn" value="提交" onclick="javascript:tb_submit()" >      </td>
   <td><input type='button'  name ="okBtn" value="完成" onclick="javascriptkdo()" >      </td>
   <td><input type='button'  name ="cancleBtn" value="取消" onclick="javascript:cancledo()" >      </td>
  </tr>
</table>

梦幻雨

学习瓦

梦幻雨

学习瓦．．