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

原创 2013年12月04日 13:54:48

直接进入主题: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);
     });
}

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

点击确定按钮之后效果:



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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery(3)--实现注册表单中当用户名为空时,实现输入框边框变色

效果图如下:   源码如下: demo05.html --> $(document).ready(funct...

table借助css样式美化例子-添加员工信息

table借助css样式美化例子,好看的table的样式和布局,css美化

精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式

表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。 首先表格中的标记:我们看一下代码: 年度收入 ...
  • yi_zz
  • yi_zz
  • 2012-10-02 10:38
  • 79022

jsp页面中插入css样式的三种方法

1、 外部样式        当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在(文档的...

在jsp中如何引入css的三种方法

对于初学者,高手勿喷! 1、 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在...

input标签 table

JQuery控制input的隐藏和显示

radio: 选择类型: 出差   ...

input标签样式

  • 2014-03-23 14:47
  • 17KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)