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

直接进入主题：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" οnchange="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" οnchange="selArea()" class="cursor">
<option value="0">请选择</option>
</select> <select id="area" οnchange="selectArea()" class="cursor">
<option value="0">请选择</option>
</select>
</td>
</tr> 
<tr>
<td>收货人姓名：</td>
<td >
<input type="text" class="ge_input" id="inputConsignee" οnblur="checkConsignee()" />
<p id="consigneeMsg"></p>
</td>
</tr>
<tr>
<td class="td"><input type="button" class="button2"
id="sure" οnclick="makeSure()" value="确认" /> <input
type="button" class="button2" id="cancle" value="修改"
οnclick="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);
     });
}

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

点击确定按钮之后效果：

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