修改保存代码该怎么写

点击修改，修改表格内容，点保存可以保存内容
<script type="text/javascript">
$(function(){
var trs="<tr><td><input type='checkbox' name='item' /></td><td></td><td></td><td></td></tr>";  
 //增加一行
$("#add").click(function(){
$("#tab tr:last").after(trs)
});
//删除选中行
$("#del").click(function(){
$("#tab input:checked").parents("tr").remove();
});
//修改
$("#Edit").click(function(){


});
});
</script>
<style type="text/css">
.btn{margin-left:250px;margin-bottom:8px}
#tab input{border:none;background:#FFF}
</style>
</head><body>
<div class="btn">
<input type="button" id="add" value="增加" />
<input type="button" id="del" value="删除" />
<input type="button" id="Edit" value="修改" />
<input type="submit" id="save" value="保存" />
</div>
<table id="tab" border="1"  cellpadding="0" cellspacing="0" width="850px" height="300px"align="center" ;bordercolor="#999999">
<tr>
<td></td>
<td>姓名</td>
<td>年龄</td>
<td>联系方式</td>
</tr>
<tr>
<td><input type="checkbox" name="item" /></td>
<td><input type="text" disabled="disabled" value="王迪"/></td>
<td><input type="text" disabled="disabled" value="32" /></td>
<td><input type="text" disabled="disabled"value="111" /></td>
</tr>
<tr>
<td><input type="checkbox" name="item" /></td>
<td><input type="text" disabled="disabled"value="孙翠"/></td>
<td><input type="text" disabled="disabled" value="27"/></td>
<td><input type="text" disabled="disabled" value="25" /></td>
</tr>
<tr>
<td><input type="checkbox" name="item" /></td>
<td><input type="text" disabled="disabled" value="赵粤"/></td>
<td><input type="text" disabled="disabled" value="22"/></td>
<td><input type="text" disabled="disabled" value="23"/></td>
</tr>
<tr>
<td><input type="checkbox" name="item" /></td>
<td><input type="text" disabled="disabled"value="李斯"/></td>
<td><input type="text" disabled="disabled" value="2"/></td>
<td><input type="text" disabled="disabled" value="ww2"/></td>
</tr>
</table></body>
</html>
function

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function edit(o){
    var p=o.parentNode;
    p=getPreviousSibling(p);
    var s=p.firstChild;
    var input=document.createElement("input");
    input.type="text";
    if(!s){
    p.appendChild(input);
    }else{
    if(s.tagName=="INPUT"){
    return;
    }
    input.value=s.nodeValue;
    p.replaceChild(input,s);
    }
    }
    function save(o){
    var p=o.parentNode;
    p=getPreviousSibling(p);
    p=getPreviousSibling(p);
    var s=p.firstChild;
    if(s.tagName!="INPUT"){
    return;
    }
    var text=document.createTextNode(s.value);
    p.replaceChild(text,s);
    }
    function getPreviousSibling(o){
    o=o.previousSibling;
    if(!o.tagName){
    o=getPreviousSibling(o);
    }
    return o;
    }
    </script>
    </head><body>
    <table>
    <tr>
    <td></td>
    <td><input type="button" value="edit" onclick="edit(this)"></td>
    <td><input type="button" value="save" onclick="save(this)"></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="button" value="edit" onclick="edit(this)"></td>
    <td><input type="button" value="save" onclick="save(this)"></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="button" value="edit" onclick="edit(this)"></td>
    <td><input type="button" value="save" onclick="save(this)"></td>
    </tr>
    </table>
    </body>
    </html>
    大体这样试下