关闭

jquery控制table中的input样式,巧妙利用标签元素,隐藏input边框

标签: jquery标签class隐藏td中input边框
3732人阅读 评论(1) 收藏 举报
分类:

直接进入主题:jsp页面源代码

<style>

.ge_table{ width:100%;}
.ge_table td{ height:44px; line-height:26px;}
.hide_border{border: 0px;padding-left: 5px;line-height: 26px;width:205px;height: 26px;}
.ge_input{border:1px solid #ccc;padding-left:5px;line-height:26px;width:205px; height:26px;}

</style>

<table cellpadding="0" cellspacing="0" border="0" class="ge_table">

<tr>
<td>收货地址:</td>
<td><select id="province" onchange="selCity()" class="cursor"><option
value="0" selected="selected">请选择</option>
<c:forEach items="${province}" var="province">
<option value="${province.zoneCode}">${province.zoneName}</option>
</c:forEach>
</select> <select id="city" onchange="selArea()" class="cursor">
<option value="0">请选择</option>
</select> <select id="area" onchange="selectArea()" class="cursor">
<option value="0">请选择</option>
</select>
</td>
</tr> 
<tr>
<td>收货人姓名:</td>
<td >
<input type="text" class="ge_input" id="inputConsignee" onblur="checkConsignee()" />
<p id="consigneeMsg"></p>
</td>
</tr>
<tr>
<td class="td"><input type="button" class="button2"
id="sure" onclick="makeSure()" value="确认" /> <input
type="button" class="button2" id="cancle" value="修改"
onclick="updateMsg()" /></td>
</tr>

</table>

点击确定按钮调用方法: 

function makeSure() {
     $("#province").attr("disabled", true);
     $("#city").attr("disabled", true);
     $("#area").attr("disabled", true);
    $("input.ge_input").each(function(){
          $(this).removeClass().addClass("hide_border").attr("readonly",true);
     });

}

点击修改按钮调用方法:

function updateMsg(){
    $("input.hide_border").each(function(){
          $(this).removeClass().addClass("ge_input").attr("readonly",false);
     });
}

点击确定按钮之前页面效果:

点击确定按钮之后效果:



点击修改按钮之后,页面效果返回如图一。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15940次
    • 积分:327
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条