表格上修改数据或删除

asp.net做的吧?自己不用写js的~~~

解决方案 »

  1.   

    哎，交代一下前提：项目是个JAVA项目，用struts+ejb3.0来弄的，感觉开发效率真的好低好累，但没办法
      

  2.   

    用AJAX技术可以实现了，，，每当修改时都去和服务器通讯，修改数据库中的信息
      

  3.   

    是要很多 javascript
    基本思路就是
    现取到 table 里的 一个tr 用getElementsByTagName
    然后tr.cloneNode(true);
    在修改tr的childNodes的值
    最后appendChild(trClone)加入到table里
      

  4.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title><style>
    TD,INPUT{ font-size:12; }
    </style>
    </head><body bgcolor=EEEEEE>
    <div style="font-size:10pt;">
    注1：把添加新行的内容放在tbDetailPrepare里，会有一些好处（可读性好点，动态设置新行的默认值方便点） <br/>                
    注2：存盘失败后返回本页，在FireFox下上次输入的值会丢失<br/>           
    注3：只支持input里的上下键移光标，左右键请用tab/shift+tab（本功能在FireFox1.5.0.8下有bug）。<br/>          <br/>          
    注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>                 
    注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20RowAddAndDelete">[email protected]</a><br/>              
    <hr/>          
    </div>
    <form name="frm" action="http://www.google.com" method=post >
    <h4 align=center>JK的动态明细示例</h4><table align="center" bordercolor=cccccc border=1  width=100% >
    <tr>
    <td align=right >
          <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();">&nbsp;                                                        
          <input type="button"  value="删除" class="bottom" onclick="delDetailProcess();">&nbsp;                                                        
          <input type="button"  value="完成" class="bottom" onclick="submitProcess();">
          
    </td>
    </tr>
    </table>
    <div width=100% id=detailTableContainer onkeydown="keyDownAndUpControl(event);">
    <table align="center" bordercolor=cccccc border=1 width=100% >
      <tr bgcolor=eeeeee id="detailHeaderTr"> 
        <td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
        <td >明细ID*</td>
        <td >明细NAME</td>
      </tr>
      <tbody id="detailTbody" >
      <tr>
      <td ><input type="checkbox" name="record_select" ></td>
      <td ><input type="text" name="detail_id" value='' ></td>
      <td ><input type="text" name="detail_name" value='' ></td>
      </tr>
      </tbody> 
    <tr height=0 ><td colspan=100 height=0 > 合计</td></tr></table>
    </div></form><!--复制的内容,请把它放在form之外-->
    <table id="tbDetailPrepare" style="display:none">
    <tr>
    <td ><input type="checkbox" name="record_select" ></td>
    <td ><input type="text" name="detail_id" value='' ></td>
    <td ><input type="text" name="detail_name" value='' ></td>
    </tr>
    </table>
    <!--用来记忆上次页面离开时的innerHtml-->
    <textarea id="theHistoryRecord" value="" style="display:none;" rows="1" cols="20"></textarea>
    </body></html><script language=javascript> window.onload = historyOncemore;//Only for IE
    window.onbeforeunload = fixHistory;//Only for IE function fixHistory() //记住历史
    {
    document.getElementById("theHistoryRecord").value=document.getElementById("detailTableContainer").innerHTML;
    } function historyOncemore() //恢复历史
    {
    if (document.getElementById("theHistoryRecord").value!="")
    {
    document.getElementById("detailTableContainer").innerHTML=document.getElementById("theHistoryRecord").value;
    }
    } function selectallcheckbox(obj) //全选或全不选
    {
    var checkboxObjs=document.getElementsByName("record_select");
    var tureorfalse=obj.checked;
    for(var i=0;i<checkboxObjs.length-1;i++)
    {
    checkboxObjs[i].checked=tureorfalse;
    }
    }


    function addDetailProcess() //增加明细
    {
    document.getElementById("detailTbody").appendChild(document.getElementById("tbDetailPrepare").rows[0].cloneNode(true)) }

    function delDetailProcess() //删除明细
    {
    if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
    var checkboxObjs=document.getElementsByName("record_select");
    for(var i=checkboxObjs.length-2;i>=0;i--)
    {
    if (checkboxObjs[i].checked)
    {
    var tempTr=checkboxObjs[i].parentNode.parentNode;
    tempTr.parentNode.removeChild(tempTr);
    }
    }
    }

    function keyDownAndUpControl(event) // 用于控制明细里的上下键。只控制input
    {
    var obj=event.srcElement||event.target;
    var k=event.keyCode;
    if (obj.tagName!="INPUT"||obj.name=="") return true;
    if( k != 38 && k != 40 ) return true;
    var theSamenameInputs=document.getElementsByName(obj.name);
    var i=0;
    for (i=0;i<theSamenameInputs.length;i++)
    {
    if (theSamenameInputs[i]==obj) break;
    }
    if((i>0)&&(k==38))
    {
    theSamenameInputs[i-1].select();//There will be error in FireFox1.5
    theSamenameInputs[i-1].focus();
    event.returnValue=false;
    return false;
    }
    if((i<theSamenameInputs.length-2)&&(k==40))
    {
    theSamenameInputs[i+1].select();//There will be error in FireFox1.5
    theSamenameInputs[i+1].focus();
    event.returnValue=false;
    return false;
    }
    }
    function submitProcess()
    {
          document.frm.submit();
    }
    </script>
      

  5.   

    用EXT实现了，不过感觉有点慢，先结帐，有问题再向各位先天请教了。