个人理解:每个table 都有一个修改按钮,当点击各自上方的”修改“按钮后,table可以进行修改,同时将”修改"按钮隐藏,出现"确认“按钮,当table修改完毕后,点击”确认“按钮,将table禁用,同时”确认“按钮隐藏,出现”修改“按钮。
//不知道理解的对不对。
思路:
根据按钮寻找对应的table元素;
隐藏/显示按妞,jq的hide/show
禁用:将table中的所有元素循环禁用,如过有些是不需要禁用的,可以增加一些自定义字段进行判断;
启用:同禁用相同;
代码:Ps: 因为你没给代码,所以,我这里的布局肯定跟你不同。
//代码没有经过测试,直接在编辑器中写的。
<html>
<head>
<style type="text/css">
#okBtn{display:none;}
</style>
</head>
<body>
<!-- 第一个table -->
<div class="table">
<div class="btn">
<button id="editBtn">修改</button>
<button id="okBtn">确定</button>
</div>
<table>
<tr><td><input type="text" /></td></tr>
</table>
</div>
<!-- 第二个table -->
<div class="table">
</div>
</body>
</html>
//js代码
//引入jquery.js
<script type="text/javascrpt".
$(function(){
//绑定事件
//修改
$('body').delegate('#editBtn",'click',function(ev){
//按钮切换
ev = ev || window.event;
var t = ev.srcElement || ev.target,$t = $(t),$p = $t.parent(),$table = $p.find('table');
$p.find('#editBtn').css('display','none');
$p.find('#okBtn').css('display','block');
//启用table
$table.find('input').each(function(){
var $ele = $(this);
$ele.disabled = false;
});
});
//确定
$('body').delegate('#okBtn','click',function(){
//此处与修改正好相反,如果这里不会的话,再追问。
});
});
</script>
追问感谢大神!这样是可以了的;但是table一开始没有被锁定;点击修改和确定都是能写的
追答一开是没有被锁定,那就执行一下”确定“方法呗。这样按钮就成”编辑“,table也锁定了