使用JQuery 做仿asp.net 中的gridview 控件编辑效果
<script src="jquery-1.3.1.js" type="text/javascript"></script> //*********导入 JQuery
<script type="text/javascript">
$(document).ready(function(){
//给class为content添加事件
(′.content′).bind("click",function()$(this).children(′.show′).hide();$(this).children(′.input′).show();$(this).next().children(′input:eq(1)′).removeAttr("disabled"););//给按两个钮添加事件('.content').next().children().bind("click",function rev(){
var a=(this) ;
if(a.val()=="取消")$a.parent().prev().children(′.show′).show();$a.parent().prev().children(′.input′).hide();$a.next().attr("disabled","disabled");if(a.val()=="修改")
{
alert ($a.parent().prev().children('.input').children('input').val());
// 是用Ajax 进行交互 提交数据
}
});
})
</script>
</head>
<body>
<table width="418" border="0">
<tr>
<td colspan="3" bgcolor="#333333">新闻种类编辑</td>
</tr>
<tr>
<td width="62">编号</td>
<td width="213" align="center">内容</td>
<td width="129" align="center">编辑</td>
</tr>
<tr>
<td width="62">1</td>
<td width="213" class="content"><div class="show" >军事新闻</div><div class="input" style="display:none;"> <input type="text" value="军事新闻"/></div></td>
<td width="129" id="edit">
<input id="Button1" type="button" value="取消" /> <input id="Button2" type="button" value="修改" disabled="disabled"/>
</td>
</tr>
<tr>
<td width="62">2</td>
<td width="213" class="content"><div class="show" >国际新闻</div><div class="input" style="display:none;"> <input type="text" value="国际新闻"/></div></td>
<td width="129" id="Td1">
<input id="Button3" type="button" value="取消" /> <input id="Button4" type="button" value="修改" disabled="disabled"/>
</td>
</tr>
<tr>
<td width="62">3</td>
<td width="213" class="content"><div class="show" >国内新闻</div><div class="input" style="display:none;"> <input type="text" value="国内新闻"/></div></td>
<td width="129" id="Td2">
<input id="Button5" type="button" value="取消" /> <input id="Button6" type="button" value="修改" disabled="disabled"/>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
//给class为content添加事件
(′.content′).bind("click",function()$(this).children(′.show′).hide();$(this).children(′.input′).show();$(this).next().children(′input:eq(1)′).removeAttr("disabled"););//给按两个钮添加事件('.content').next().children().bind("click",function rev(){
var a=(this) ;
if(a.val()=="取消")$a.parent().prev().children(′.show′).show();$a.parent().prev().children(′.input′).hide();$a.next().attr("disabled","disabled");if(a.val()=="修改")
{
alert ($a.parent().prev().children('.input').children('input').val());
// 是用Ajax 进行交互 提交数据
}
});
})
</script>
</head>
<body>
<table width="418" border="0">
<tr>
<td colspan="3" bgcolor="#333333">新闻种类编辑</td>
</tr>
<tr>
<td width="62">编号</td>
<td width="213" align="center">内容</td>
<td width="129" align="center">编辑</td>
</tr>
<tr>
<td width="62">1</td>
<td width="213" class="content"><div class="show" >军事新闻</div><div class="input" style="display:none;"> <input type="text" value="军事新闻"/></div></td>
<td width="129" id="edit">
<input id="Button1" type="button" value="取消" /> <input id="Button2" type="button" value="修改" disabled="disabled"/>
</td>
</tr>
<tr>
<td width="62">2</td>
<td width="213" class="content"><div class="show" >国际新闻</div><div class="input" style="display:none;"> <input type="text" value="国际新闻"/></div></td>
<td width="129" id="Td1">
<input id="Button3" type="button" value="取消" /> <input id="Button4" type="button" value="修改" disabled="disabled"/>
</td>
</tr>
<tr>
<td width="62">3</td>
<td width="213" class="content"><div class="show" >国内新闻</div><div class="input" style="display:none;"> <input type="text" value="国内新闻"/></div></td>
<td width="129" id="Td2">
<input id="Button5" type="button" value="取消" /> <input id="Button6" type="button" value="修改" disabled="disabled"/>
</td>
</tr>
</table>
</body>
</html>
本文来自博客园，作者：至道中和，转载请注明原文链接：https://www.cnblogs.com/voidobject/archive/2012/03/18/3975510.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！