您的位置：首页 > Web前端 > JQuery

使用JQuery 做仿asp.net 中的gridview 控件编辑效果

2012-03-18 11:36 369 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航